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

时间:2016-01-27 08:13:46

标签: javascript reactjs react-router

我有一个如下路由器:

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

这就是我想要实现的目标:

  1. 如果用户未登录,则将用户重定向到/login
  2. 如果用户在登录后尝试访问/login,请将其重定向到root /
  3. 所以现在我试图在App的{​​{1}}中检查用户的状态,然后执行以下操作:

    componentDidMount

    这里的问题是我无法找到获取当前路线的API。

    我发现this closed issue建议使用Router.ActiveState mixin和路由处理程序,但看起来这两个解决方案现已弃用。

9 个答案:

答案 0 :(得分:110)

在阅读了更多文档之后,我找到了解决方案:

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

我只需要访问组件实例的注入属性,如:

location

答案 1 :(得分:27)

您可以使用

获取当前路线
const currentRoute = this.props.routes[this.props.routes.length - 1];

...这使您可以访问最低级别的活动<Route ...>组件中的道具。

...鉴于

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

currentRoute.path返回'childpath'currentRoute.component返回function _class() { ... }

答案 2 :(得分:10)

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

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

得到它?

答案 3 :(得分:8)

从3.0.0版开始,您可以通过调用以下方式获取当前路由:

  

this.context.router.location.pathname

示例代码如下:

#element{
    background-image: url('your/image/url.jpg');
    background-position:center;
    background-size:cover;
}

答案 4 :(得分:7)

对于2017年遇到相同问题的任何用户,我通过以下方式解决了问题:

NavBar.contextTypes = {
    router: React.PropTypes.object,
    location: React.PropTypes.object
}

并像这样使用它:

componentDidMount () {
    console.log(this.context.location.pathname);
}

答案 5 :(得分:2)

你可以使用&#39; isActive&#39;道具如此:

const { router } = this.context;
if (router.isActive('/login')) {
    router.push('/');
}

isActive将返回true或false。

使用react-router 2.7进行测试

答案 6 :(得分:2)

在App.js window.location.pathname中尝试

答案 7 :(得分:0)

以同样的方式为我工作:

...
<MyComponent {...this.props}>
  <Route path="path1" name="pname1" component="FirstPath">
  ...
</MyComponent>
...

然后,我可以在MyComponent函数中访问“this.props.location.pathname”。

我忘了它是我...)))以下链接描述了更多制作导航栏等。react router this.props.location

答案 8 :(得分:0)

尝试使用以下方法获取路径: document.location.pathname

在Javascript中,您可以将当前URL分为多个部分。查看: https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/