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

Question

我有一个如下所示的路由器：

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

这是我想要实现的目标：

如果未登录，则将用户重定向到 /login
如果用户在已经登录时尝试访问 /login，将他们重定向到 root /

所以现在我正在尝试检查 App 的 componentDidMount 中的用户状态，然后执行以下操作：

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

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

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

Answer 1

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

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

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

var currentLocation = this.props.location.pathname

Answer 2

如果使用history，Router会把所有的东西都放到history的位置，比如：

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

明白了吗？

Answer 3

您可以使用

获取当前路线

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

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

鉴于...

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

currentRoute.path returns 'childpath' 和 currentRoute.component returns function _class() { ... }.

Answer 4

您可以像这样使用 'isActive' 道具：

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

isActive 将 return 为真或假。

使用 react-router 2.7 测试

Answer 5

从3.0.0版本开始，您可以通过调用获取当前路由：

this.context.router.location.pathname

示例代码如下：

var NavLink = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },

    render() {   
        return (
            <Link {...this.props}></Link>
        );
    }
});

Answer 6

对于2017年遇到同样问题的用户，我通过以下方式解决了：

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

并像这样使用它：

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

Answer 7

以同样的方式为我工作：

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

然后，我可以在 MyComponent 函数中访问 "this.props.location.pathname"。

我忘记了我是...))) 下面link描述更多关于制作导航栏等：

Answer 8

在App.js中添加下面的代码并尝试

window.location.pathname

Answer 9

尝试使用以下方式获取路径： document.location.pathname

在 Javascript 中，您可以将当前的 URL 分成几部分。查看： https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

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

How to get current route in react-router 2.0.0-rc5

javascript

reactjs

react-router