如何在react路由器中确定活动路由

Question

我有一个Redux应用程序，它使用带有嵌套路由的react路由器，如下所示：

<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>

我正在尝试编写一个breadcrumbs组件；所以我希望能够确定当前的路由。

我已经使用react路由器提供的withRouter函数配置了接收路由器的组件：

Breadcrumbs = withRouter(Breadcrumbs);

这为我提供了一个路由器对象，如下所示：

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

我可以用它来确定当前的路由吗？有没有更好的方法？

Answer 1

通过withRouter获取位置等是在react-router版本3.0中添加的。丹·阿布拉莫夫建议升级到3.0版本以使用withRouter。从2.7到3.0，它只提供了你所看到的功能。

来源：https://github.com/ReactTraining/react-router/blob/master/CHANGES.md#v300-alpha1

Answer 2

已经有一个模块可以为您完成此任务，我相信它就是react-router-breadcrumbs。不过我还没试过。

如果你想要一个自定义的解决方案，下面是你可以做的：

使用this.props.routes和this.props.params对象。然后，您可以通过routes进行映射，并为每个条目在params对象中查找这样的键。然后，您可以使用上述参数创建一个字符串。

请注意，我为每个路由(IndexRoutes除外)提供了一个path属性，因为有时我希望显示给定页面的自定义名称。例如：

<Route path="/:productId" name="Start" title="Start" component={StartView} />

以下是我的应用程序上的解决方案：

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>
}

您可能希望将其放入您的顶级React组件中。