Javascript 如何在 react-router 2.0.0-rc5 中获取当前路由
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35031911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get current route in react-router 2.0.0-rc5
提问by wxtry
I have a router like below:
我有一个如下所示的路由器：
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Index}/>
<Route path="login" component={Login}/>
</Route>
</Router>
Here's what I want to achieve :
这是我想要实现的目标：
- Redirect user to
/loginif not logged in - If user tried to access
/loginwhen they are already logged in, redirect them to root/
/login如果未登录，则将用户重定向到- 如果用户
/login在已经登录的情况下尝试访问，请将其重定向到 root/
so now I'm trying to check user's state in App's componentDidMount, then do something like:
所以现在我正在尝试检查App's 中的用户状态componentDidMount，然后执行以下操作：
if (!user.isLoggedIn) {
this.context.router.push('login')
} else if(currentRoute == 'login') {
this.context.router.push('/')
}
The problem here is I can't find the API to get current route.
这里的问题是我找不到获取当前路线的 API。
I found this closed issuesuggested using Router.ActiveState mixin and route handlers, but it looks like these two solutions are now deprecated.
我发现这个关闭的问题建议使用 Router.ActiveState 混合和路由处理程序，但看起来这两个解决方案现在已被弃用。
回答by wxtry
After reading some more document, I found the solution:
阅读更多文档后，我找到了解决方案：
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md
I just need to access the injected property locationof the instance of the component like:
我只需要访问location组件实例的注入属性，如：
var currentLocation = this.props.location.pathname
回答by colllin
You can get the current route using
您可以使用获取当前路线
const currentRoute = this.props.routes[this.props.routes.length - 1];
...which gives you access to the props from the lowest-level active <Route ...>component.
...这使您可以从最低级别的活动<Route ...>组件访问道具。
Given...
鉴于...
<Route path="childpath" component={ChildComponent} />
currentRoute.pathreturns 'childpath'and currentRoute.componentreturns function _class() { ... }.
currentRoute.path返回'childpath'并currentRoute.component返回function _class() { ... }。
回答by one
If you use the history,then Router put everything into the location from the history,such as:
如果使用历史记录，则路由器将所有内容放入历史记录中的位置，例如：
this.props.location.pathname;
this.props.location.query;
get it?
得到它？
回答by Sithu
As of version 3.0.0, you can get the current route by calling:
从 3.0.0 版本开始，您可以通过调用获取当前路由：
this.context.router.location.pathname
this.context.router.location.pathname
Sample code is below:
示例代码如下：
var NavLink = React.createClass({
contextTypes: {
router: React.PropTypes.object
},
render() {
return (
<Link {...this.props}></Link>
);
}
});
回答by Aotik
For any users having the same issue in 2017, I solved it the following way:
对于在 2017 年遇到相同问题的任何用户，我通过以下方式解决了它：
NavBar.contextTypes = {
router: React.PropTypes.object,
location: React.PropTypes.object
}
and use it like this:
并像这样使用它：
componentDidMount () {
console.log(this.context.location.pathname);
}
回答by Tuan Nguyen
In App.jsadd the below code and try
在App.js添加下面的代码与试
window.location.pathname
回答by MarvinVK
You could use the 'isActive' prop like so:
您可以像这样使用“isActive”道具：
const { router } = this.context;
if (router.isActive('/login')) {
router.push('/');
}
isActive will return a true or false.
isActive 将返回真或假。
Tested with react-router 2.7
使用 react-router 2.7 测试
回答by Michael Mendoza
Try grabbing the path using:
document.location.pathname
尝试使用以下方法抓取路径：
document.location.pathname
In Javascript you can the current URL in parts. Check out: https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/
在 Javascript 中，您可以分部分获取当前 URL。查看：https: //css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/
回答by Alex
Works for me in the same way:
以同样的方式为我工作：
...
<MyComponent {...this.props}>
<Route path="path1" name="pname1" component="FirstPath">
...
</MyComponent>
...
And then, I can access "this.props.location.pathname" in the MyComponent function.
然后，我可以在 MyComponent 函数中访问“this.props.location.pathname”。
I forgot that it was I am...))) Following link describes more for make navigation bar etc.: react router this.props.location
我忘记了我是...))) 以下链接描述了制作导航栏等的更多信息：react router this.props.location
