React-router: Access to the current Route

[gilesbradshaw]

I haven't found a way to get access to the current route that gave rise to the route handler - i've hacked your code in RouteHandler like this...

  createChildRouteHandler(props) {
var route = this.context.router.getRouteAtDepth(this.getRouteDepth());

if (route == null)
  return null;

var childProps = assign({}, props || this.props, {
  ref: REF_NAME,
  params: this.context.router.getCurrentParams(),
  query: this.context.router.getCurrentQuery(),
  route:route
});

return React.createElement(route.handler, childProps);

}

I'm sure this isn't the way to do it but is there a better way to get this access?

[taurose]

This should work:

Handler.contextTypes = {
  routeDepth: PropTypes.number.isRequired,
  router: PropTypes.router.isRequired
};

// somewhere in Handler
var route = this.context.router.getRouteAtDepth(this.context.routeDepth);

(essentially what RouteHandler does)

Alternatively, if you don't like using context, you can pass the state.routes array from Router.run via props. You'd have to do the mapping yourself though, e.g. by passing an additional routeDepth prop (serving as array index, like the context one does) that is incremented by every handler.

[gilesbradshaw]

That's brilliant thank you so much
although it seems to be

var route = this.context.router.getRouteAtDepth(this.context.routeDepth-1);

[ryanflorence]

also 1.0 injects this.props.route to route components.

[salmanm]

@ryanflorence Does this.props.route serve the purpose of finding the depth of current route? Because I've seen it to return the Main route. For e.g. if following are my Routes

<Route path="/" component={Main}>
  <IndexRoute component={SomeComponent}/>
  <Route path="/some-other-path" component={SomeOther} />
</Route>

Then inside Main.js, I can only see this.props.route as Main route even if I have navigated to /some-other-path.

Basically, how in 1.0 do we find if we're at root route level or not? To show side menu, or back button.

Any idea?

[taion]

this.props.routes.length, but in your case why not just check isActive?

[salmanm]

You mean I should iterate on this.props.routes and check which one
isActive and read it's routeParams.

Sound good, I'll give it a try

Update: No, it doesn't work @taion. I see that the history object has isActive method. Do we not have a bit cleaner way to find out current route, so that we can read routeParams?

[sethmcleod]

@salmanm In v1.0 was able to find the current route pathname by using this.props.location.pathname. You could then check that against / to see if you're at the root level, or use it to run code conditionally for different routes.