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

我有一个像下面这样的路由器:

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

以下是我想达到的目标:

  1. 如果没有登录，将用户重定向到 /login
  2. 如果用户在已经登录时试图访问 /login，请将它们重定向到根 /

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

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

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

我发现 这个封闭的问题建议使用路由器。ActiveStateMixin 和路由处理程序，但是这两个解决方案现在似乎已经不被推荐使用了。

115827 次浏览
小开
最佳答案

在阅读了更多的文档后，我找到了解决办法:

Https://github.com/reacttraining/react-router/blob/master/packages/react-router/docs/api/location.md

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

var currentLocation = this.props.location.pathname
小开

如果您使用历史记录，那么路由器将所有内容从历史记录中输入位置，例如:

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

懂了吗？

小开

您可以使用

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

这样你就可以使用最低级别的 <Route ...>组件的道具。

鉴于..。

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

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

小开

你可以像下面这样使用“ isActive”:

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

IsActive 将返回 true 或 false。

使用反应路由器2.7进行测试

小开

从3.0.0版本开始，您可以通过调用:

This. context.router.location.pathname

示例代码如下:

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


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

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

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

像这样使用它:

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

对我也一样:

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

然后，我可以访问 MyComponent 函数中的“ this.pros.location.pathname”。

我忘了它是我...))下面的链接描述了更多的使导航栏等: 反应路由器这个，道具，位置

小开

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

window.location.pathname
小开

试着用以下方法抓住路径: document.location.pathname

在 Javascript 中，你可以把当前的 URL 分成几部分: Https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/


提交答案