How to determine active route in react router - redux

Question

I'm have a Redux app that uses react router with nested routes, like this:
<Provider store={store}>
<Router history={browserHistory}>
<Route name="sales" path="/" component={App}>
<IndexRoute name="home" component={Home} />
<Route name="reports" path="/reports" component={Reports}>
<IndexRoute name="reports-home" component={ReportsHome} />
<Route name="report-1" path="/reports/report-1" component={Report1}/>
<Route name="report-2" path="/reports/report-2" component={Report2}/>
</Route>
</Route>
</Router>
</Provider>
I'm trying to write a breadcrumbs component; so would like to be able to deterime the current route.
I've configured the component to receive the router using the withRouter function provided by react router:
Breadcrumbs = withRouter(Breadcrumbs);
This gives me a router object that looks like this:
Object {__v2_compatible__: true}
__v2_compatible__: true
createHref: createHref(location, query)
createKey: createKey()createLocation: createLocation(location)
createPath: createPath(location, query)
go: go(n)
goBack: goBack()
goForward: goForward()
isActive: isActive(location)
listen: listen(listener)
listenBefore: listenBefore(hook)
push: push(location)
pushState: ()
registerTransitionHook: registerTransitionHook(hook)
replace: replace(location)
replaceState: ()
setRouteLeaveHook: listenBeforeLeavingRoute(route, hook)
setState: ()
transitionTo: transitionTo(nextLocation)
unregisterTransitionHook: unregisterTransitionHook(hook)
__proto__: Object
Can I use this to determine the current route? Is there better way?

Answer 1

Getting location etc. via withRouter was added in react-router version 3.0. Dan Abramov recommends upgrading to 3.0 to use withRouter. From 2.7 to 3.0, it only provided the functions you saw.
Source: https://github.com/ReactTraining/react-router/blob/master/CHANGES.md#v300-alpha1

Answer 2

There is already a module that does this for you, I believe it's called react-router-breadcrumbs. I haven't tried it though.
If you want a custom solution, here's what you could do:
Use the this.props.routes and this.props.params objects. You can then map through the routes and for each entry make a lookup for such key in the params object. You can then create a string with said parameters.
Note that I have given each route (except IndexRoutes) a path attribute, because sometimes I want to display a custom name for a given page. For example:
<Route path="/:productId" name="Start" title="Start" component={StartView} />
Here's the solution on my app:
componentDidMount = () => {
this._prepareBreadCrumbs(this.props);
}
componentWillReceiveProps = (newProps) => {
this._prepareBreadCrumbs(newProps);
}
_prepareBreadCrumbs = (props) => {
let {routes, params} = props;
let breadcrumbPath = "";
let temp = routes.map(
(item, i) => {
if(item.path == null) return null; //if we are visiting an item without a path, ignore it.
if(i < routes.length-1 && routes[i+1].path != null) {
let arr = item.path.split(/[:/]|(:\/)/g); //sometimes the path is like "/:product_id/details" so I need to extract the interesting part here.
arr = arr.map(function(obj) {
return (obj in params) ? params[obj] : obj; //We now have ":product_id" and "details" - the first one will exist in the "params" object.
});
breadcrumbPath += arr.filter(Boolean).join("/") + "/"; //clean out some garbage and add the "/" between paths.
if(i == 0) return <li key={i}><Link to={breadcrumbPath}>YourSite.com</Link></li> //If on the root - display the site name
return <li key={i}><Link to={breadcrumbPath}>{item.name}</Link></li>
} else {
document.title = "YourSite.com - " + item.title; //set the document title if you want
if(i == 0) return <li key={i} className="active"><span>YourSite.com</span></li>
return <li key={i} className="active"><span>{item.name}</span></li>
}
}
);
this.setState({breadcrumbPath: temp});
}
render() {
<p>{this.state.breadCrumbPath || ""}</p>
}
You'd want to put this in your top-level React Component.