React Router v4-如何获取当前路由?


180

我想显示title<AppBar />以某种方式从目前的路线通过。

在React Router v4中,如何将<AppBar />当前路由传递到titleprop中?

  <Router basename='/app'>
    <main>
      <Menu active={menu} close={this.closeMenu} />
      <Overlay active={menu} onClick={this.closeMenu} />
      <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' />
      <Route path='/customers' component={Customers} />
    </main>
  </Router>

有没有办法通过从自定义自定义标题prop<Route />


Answers:


74

在5.1版本的react-router中,有一个名为useLocation的钩子,该钩子返回当前的位置对象。这在您需要了解当前URL的任何时候都可能有用。

import { useLocation } from 'react-router-dom'

function HeaderView() {
  let location = useLocation();
  console.log(location.pathname);
  return <span>Path : {location.pathname}</span>
}


6
请注意,这只能在路由器DOM内使用(即chid组件,不能在使用路由器的类/功能组件中使用)。这可能很明显,但对于像我这样的新手却不是:-)我一直都在收到错误“ useContext未定义”
BennyHilarious,

如果使用路由器redirect,这也不起作用。这将在重定向之前读取路径
Sonic Soul

谢谢您的回答……
bellabelle

211

在React Router 4中,当前路由为- this.props.location.pathname。只需获取 this.props并验证。如果仍然看不到 location.pathname,则应使用装饰器withRouter

这可能看起来像这样:

import {withRouter} from 'react-router-dom';

const SomeComponent = withRouter(props => <MyComponent {...props}/>);

class MyComponent extends React.Component {
  SomeMethod () {
    const {pathname} = this.props.location;
  }
}

14
请注意,这并不总是正确的:使用react-router4,如果您的组件相对于某些嵌套路由(在以后扩展路径)在更高级别呈现,则WithRouter中的location.pathname将不同于window.location.pathname
maioman

3
我们如何在React组件之外以编程方式获取它?
trusktr

78

如果使用的是反应的模板,在您结束反应文件看起来是这样的:export default SomeComponent你需要使用高次成分(通常被称为一个“特别”) withRouter

首先,您需要withRouter像这样导入:

import {withRouter} from 'react-router-dom';

接下来,您将要使用 withRouter。您可以通过更改组件的导出来做到这一点。您可能想从更改export default ComponentNameexport default withRouter(ComponentName)

然后,您可以从道具中获取路线(以及其他信息)。具体而言,locationmatch,和history。吐出路径名的代码为:

console.log(this.props.location.pathname);

此处提供了包含其他信息的优质文章:https//reacttraining.com/react-router/core/guides/philosophy


但是,如何获得完整的网址?
Tessaracter

18

这是使用更多信息的解决方案history

import { createBrowserHistory } from "history";

const history = createBrowserHistory()

路由器内部

<Router>
   {history.location.pathname}
</Router>

3
对于那些在反应功能道路上的人来说,这个答案是最有意义的。那些this.props....只是在我们耳边的噪音。
KhoPhi

17

在react-router v5中有一个名为useLocation的钩子,不需要HOC或其他东西,它非常简洁方便。

import { useLocation } from 'react-router-dom';

const ExampleComponent: React.FC = () => {
  const location = useLocation();  

  return (
    <Router basename='/app'>
      <main>
        <AppBar handleMenuIcon={this.handleMenuIcon} title={location.pathname} />
      </main>
    </Router>
  );
}

这个答案应该被评为更高。比其他解决方案(如果在RR v5上)使用钩子要容易得多,直观得多
BrDaHa

10

我认为作者的React Router(v4)刚刚在Router HOC中添加了它,以安抚某些用户。但是,我相信更好的方法是只使用render prop并制作一个简单的PropsRoute组件来传递这些prop。由于它不像withRouter那样“连接”组件,因此更易于测试。用Router包装了很多嵌套组件,这不会很有趣。另一个好处是,您还可以通过此通行证通过任何想要的路线道具。这是使用渲染道具的简单示例。(确切的例子来自他们的网站https://reacttraining.com/react-router/web/api/Route/render-func)(src / components / routes / props-route)

import React from 'react';
import { Route } from 'react-router';

export const PropsRoute = ({ component: Component, ...props }) => (
  <Route
    { ...props }
    render={ renderProps => (<Component { ...renderProps } { ...props } />) }
  />
);

export default PropsRoute;

用法:(注意获取路由参数(match.params),您可以只使用此组件,这些将为您传递)

import React from 'react';
import PropsRoute from 'src/components/routes/props-route';

export const someComponent = props => (<PropsRoute component={ Profile } />);

还请注意,您也可以通过这种方式传递任何想要的额外道具

<PropsRoute isFetching={ isFetchingProfile } title="User Profile" component={ Profile } />

3
有什么办法可以将这种解决方案变成代码笔?我想使用更正确的解决方案,但我真的不知道如何实现。
LAdams87 '19

7

精读Posidielov说,目前的路线是存在this.props.location.pathname

但是,如果要匹配键(或名称)等更特定的字段,则可以使用matchPath查找原始路由参考。

import { matchPath } from `react-router`

const routes = [{
  key: 'page1'
  exact: true,
  path: '/page1/:someparam/',
  component: Page1,
},
{
  exact: true,
  key: 'page2',
  path: '/page2',
  component: Page2,
},
]

const currentRoute = routes.find(
  route => matchPath(this.props.location.pathname, route)
)

console.log(`My current route key is : ${currentRoute.key}`)

0

import {withRouter} from 'react-router-dom';

然后更改您的组件导出

export default withRouter(ComponentName)

然后,您可以使用以下方法直接在组件本身内访问路线(无需触摸项目中的任何其他内容):

window.location.pathname

2020年3月进行了以下测试:“版本”:“ 5.1.2”


不确定这一点。当然,它提供了当前的路径名,但是如果我导航到一个新页面,它不会改变。
亚历克斯
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.