如何确定活动路线反应路由器

Question

我有一个使用嵌套路线反应路由器一个终极版的应用程序，如：

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

我想写一个面包屑成分;所以想要能够遏制当前的路线。

我已经配置了部分使用所提供的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

已经有，这是否对你的模块，我相信这就是所谓的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> 
} 

你会希望把这个在您的顶级阵营的组成部分。

Answer 2

入门位置等经由withRouter在反应路由器版本3.0中的溶液。 Dan Abramov建议升级到3.0以与路由器一起使用。从2.7到3.0，它只提供你看到的功能。

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