如何確定活動路線反應路由器

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