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

Posted 2023-02-21

【中文标题】如何在 react-router 2.0.0-rc5 中获取当前路由

【英文标题】：How to get current route in react-router 2.0.0-rc5

【发布时间】：2016-05-04 01:59:14

【问题描述】：

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

<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 混合和路由处理程序，但现在看来这两种解决方案已被弃用。

【参考方案1】：

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

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

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

var currentLocation = this.props.location.pathname

【讨论】：

在某些子组件中不可用，但我设法通过prop传递它们。

对我来说 (v2.8.1)，它可以通过 this.state.location.pathname（而不是 props）获得。

您需要确保将其添加到您的组件中static contextTypes = router: React.PropTypes.object

如果在你的子组件中不可用，你只需要使用 withRouter() 进行包装

谢谢，这个链接很有帮助！

【参考方案2】：

您可以使用

获取当前路线

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

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

鉴于...

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

currentRoute.path 返回'childpath' 和currentRoute.component 返回function _class() ... 。

【讨论】：

这是一个很棒的方法，因为它保留了路由上定义的任何自定义属性。 this.props.location 丢失了这些自定义属性。

要获取上一条路线（即返回按钮+标签），您可以使用this.props.routes.length - 2

【参考方案3】：

如果你使用history，那么Router会将所有的东西都放入history中的位置，比如：

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

明白了吗？

【讨论】：

也许你可以扩展你的答案，以获得更多的输入和一些参考？现在太笼统了

【参考方案4】：

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

this.context.router.location.pathname

示例代码如下：

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

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

【参考方案5】：

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

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

并像这样使用它：

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

【讨论】：

由于PropTypes 现在是一个独立的依赖项，考虑添加：import PropTypes from 'prop-types'; ... NavBar.contextTypes = router: PropTypes.object, location: PropTypes.object ;

【参考方案6】：

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

window.location.pathname

【讨论】：

这在重定向期间变得陈旧，并且仅在重定向发生后更新

【参考方案7】：

你可以像这样使用 'isActive' 属性：

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

isActive 将返回 true 或 false。

使用 react-router 2.7 测试

【参考方案8】：

以同样的方式为我工作：

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

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

我忘了是我...))) 以下链接描述了更多关于制作导航栏等的内容：react router this.props.location

【参考方案9】：

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

在 javascript 中，您可以分部分显示当前 URL。退房： https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/