如何在react路由器2.0.0-rc5中获取当前路由

Question

我有一个路由器像下面：

<Router history={hashHistory}>
    <Route path="/" component={App}>
        <IndexRoute component={Index}/>
        <Route path="login" component={Login}/>
    </Route>
</Router>

以下是我想要实现的目标：

1. 如果未登录，将用户重定向到/login
2. 如果用户在登录后试图访问/login，请将其重定向到root/

因此，现在我尝试在应用程序的组件didmount中检查用户的状态，然后执行如下操作：

if (!user.isLoggedIn) {
    this.context.router.push('login')
} else if(currentRoute == 'login') {
    this.context.router.push('/')
}

这里的问题是我找不到获取当前路由的API。

我发现这个已解决的问题建议使用Router.ActiveState mixin和route处理程序，但这两个解决方案现在似乎已被弃用。




Answer 1

如果使用历史记录，则路由器会将历史记录中的所有内容放入该位置，例如：

this.props.location.pathname;
this.props.location.query;

了解了？

Answer 2

你可以得到当前的路线使用

const currentRoute = this.props.routes[this.props.routes.length - 1];

…这使您可以从最低级别的活动

鉴于...

<Route path="childpath" component={ChildComponent} />

当前oute.path返回'子路径和当前oute.component返回函数_class（）{...}。

Answer 3

在阅读了更多的文档后，我找到了解决方案：

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md

我只需要访问组件实例的注入属性位置，如：

var currentLocation = this.props.location.pathname