Redux 如何确定react路由器中的活动路由

我有一个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>

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

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

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

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

---

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

已经有一个模块可以为您实现这一点，我相信它叫做。不过我还没试过

如果您想要定制解决方案，请执行以下操作：

---

使用

this.props.routes

和

this.props.params

对象。然后，您可以映射

路由

，并在

参数

对象中为每个条目查找此类键。然后可以使用所述参数创建字符串

请注意，我为每个路由（IndexRoutes除外）指定了一个

path

属性，因为有时我希望为给定页面显示自定义名称。例如：

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

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

componentDidMount=（）=>{
这个。_preparebreadcrumps（这个道具）；
}
组件将接收道具=（新道具）=>{
这个._preparebreadcrumps（新道具）；
}
_PrepareBreadcrumps=（道具）=>{
设{routes，params}=props；
让breadcrumbPath=“”；
设temp=routes.map(
（项目i）=>{
if（item.path==null）返回null；//如果我们访问的项目没有路径，请忽略它。
if（iYourSite.com//如果在根目录上-显示站点名称
返回
{item.name}
}否则{
document.title=“YourSite.com-”+item.title；//如果需要，请设置文档标题
如果（i==0）返回YourSite.com
return
{item.name}
}
}
);
this.setState（{breadcrumbPath:temp}）；
}
render（）{
{this.state.breadCrumbPath | |“”

}

---

您希望将其放在顶级React组件中。

通过withRouter获取位置等。React router 3.0版中添加了withRouter。Dan Abramov建议升级到3.0以与路由器一起使用。从2.7到3.0，它只提供您看到的功能

---

来源：

isActive

可用于确定位置路径名是否处于活动状态