Get current route names

[tarjei]

Hi, is there a way to get the current route name(s) from the router?

Something like

var activeRoutes = Router.getActiveRoute(); 
// activeRoutes = ["root", "Section", "Subsection"];

Is that possible? Would that be something to add to the ActiveStore?

[ryanflorence]

Can you explain a use-case or two that you're after?

[tarjei]

I got a handler that uses different route names depending on where it is, i.e. if it is mounted under one route it provides one routename to a link and if it is mounted under another route it provides a different routename to the link.

The main part of the route is nested inside this handler. Is that clear enough?

Right now I run a regexp against the current hash to detect which route I'm in.

[tarjei]

While I'm at it, another method that would be usefull is an isActive(name, props, query) method to check if a given route is active.

Usage example:

<li class={Route.isActive("myRoute", {param1: "te"}) ? 'active' : ''}>...</li>

It is not always the right thing to have this on the Link element.

[mjackson]

another method that would be usefull is an isActive(name, props, query) method to check if a given route is active

Use the Router.ActiveState mixin.

[jaredly]

:close:?

[ryanflorence]

Yeah, I think when there's a use case that doesn't boil down to "am I active?" We can reopen.

[tarjei]

Please reopen. The usecase in my first comment still stands. It is not "am I active?" but "in what context am I in?" which is different.

[ryanflorence]

@tarjei I'm not totally understanding, can you post some code?

From what I can gather (and its probably not correct) you could share a mixin but use two different handlers with different props but the same render.

var SharedMixin = {
  render: function() {
    var link = <Link to={this.props.linkTo}/>
    // ...
  }
}

var A = React.createClass({
  mixins: [SharedMixin],
  getDefaultProps: {
    return { linkTo: 'something' }
  }
});

var B = React.createClass({
  mixins: [SharedMixin],
  getDefaultProps: {
    return { linkTo: 'something-else' }
  }
});

<Routes>
  <Route handler={A}/>
  <Route handler={B}/>
</Routes>

Am I way off? Is this terrible?

[ryanflorence]

Hmm ... actually

<Routes>
  <Route name="foo" otherProp="foo" handler={SharedHandler}/>
  <Route name="bar" otherProp="bar" handler={SharedHandler}/>
</Routes>

Then you can branch on this.props.otherProp in your render.

This gets me thinking that we ought to just pass the name in there to, seems weird we don't since we pass user-defined props down to the handler. Maybe we should just expose them all on this.props.routeProps.

I also think routeProps ought to be sent to the transition hooks too as discussed a bit here #139 (comment)

[tarjei]

Hi, Ryan, thanks for reopening.

Your last comment captures the usecase well.

Here's an example that shows my problem with a bit more detail:

var SharedHandler = React.createClass({
      render: function() {
            var myRouteName = ? ;

            return <div><Link to={myRouteName} someProp="foo">Next foo!</a></div>
      }
});

<Routes>
  <Route name="someFOO" handler={SomeFooHandler}>
        <Route name="someFOO-bar" otherProp="foo" handler={SharedHandler}/>
 </Route>
 <Route name="otherFoo" handler="OtherFooHandler">
    <Route name="otherFoo-bar" otherProp="foo" handler={SharedHandler}/>
 </Route>
</Routes>

So I might need not to just know the current route name, but the route name of the parent route as well, but just knowing the current route is a great boon - I can always work from there.

[ryanflorence]

Interesting. For now you can just put whatever names in the route props and access in the handler. Can you explain what you're trying to do in the application, rather than explaining the kind of solution you're imagining? Maybe there's a different solution.

[karlmikko]

@tarjei would you consider a bread crumb to be a similar use case?

[tarjei]

@karlmikko, yes it might be. You might want to keep the breadcrumb outside of the main application for example. Something like:

// in main handler

@rpflorence : The main handlers are different ways that I list videos. The Shared handler is a modal that I use to show the videos.

[karlmikko]

@tarjei the reason I asked was to wonder if you could take the same approach to know what route you were on.

from what i can see in your example you are tying to link to a relative route path akin to

/whatever/5.html <a href="6.html">link</a> resolving to /whatever/6.html

[karlmikko]

Another option could be something like this

<Routes>
  <Route name="someFOO" handler={SomeFooHandler}>
        <Route name="someFOO-bar" otherProp="foo" handler={SharedHandler} parentHandler={SomeFooHandler}/>
 </Route>
 <Route name="otherFoo" handler={OtherFooHandler}>
    <Route name="otherFoo-bar" otherProp="foo" handler={SharedHandler} parentHandler={OtherFooHandler}/>
 </Route>
</Routes>

then access this.props.parentHandler from the SharedHandler

However this won't let you see the route you are on.

[karlmikko]

@tarjei I think dynamic routes for the different ways to list your videos might work also

<Routes>
  <Route name="video" path="/:method" handler={SomeHandler}>
        <Route name="modal" path="/:method/view" handler={SharedHandler} />
 </Route>
</Routes>

Where SomeHandler changes if SomeFooHandler is rendered or OtherFooHandler.

Then you will always have the current route.

[ryanflorence]

closed via #157