React Router v4 - 如何获取当前路线？

Question

我想在 <AppBar /> 中显示以某种方式从当前路由传入的 title。

在 React Router v4 中，<AppBar /> 如何将当前路由传递给它的 title 属性？

  <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>

有没有办法从 <Route /> 上的自定义 prop 传递自定义标题？

Answer 1

在 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;
  }
}

Answer 2

我认为 React Router (v4) 的作者只是添加了 withRouter HOC 来安抚某些用户。但是，我相信更好的方法是只使用 render prop 并制作一个简单的 PropsRoute 组件来传递这些 props。这更容易测试，因为它不像 withRouter 那样 "connect" 组件。将一堆嵌套组件包裹在 withRouter 中，这不会很有趣。另一个好处是您还可以使用此传递通过任何您想要的道具到路线。这是使用 render prop 的简单示例。（几乎是他们网站上的确切示例 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 } />

Answer 3

如果您使用的是 React 的模板，那么您的 React 文件的结尾如下所示：export default SomeComponent 您需要使用高阶组件（通常称为 "HOC"）， withRouter.

首先，您需要像这样导入 withRouter：

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

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

然后您可以从道具中获取路线（和其他信息）。具体来说，location、match 和 history。吐出路径名的代码是：

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

此处提供了一篇包含更多信息的好文章：https://reacttraining.com/react-router/core/guides/philosophy

Answer 4

这是一个使用 history Read more

的解决方案

import { createBrowserHistory } from "history";

const history = createBrowserHistory()

路由器内部

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

Answer 5

有表示，当前路线在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}`)

Answer 6

在react-router v5中有一个叫useLocation的hook，不需要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>
  );
}

Answer 7

添加

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

然后更改组件导出

export default withRouter(ComponentName)

然后您可以直接在组件内部访问路由（无需触及项目中的任何其他内容）使用：

window.location.pathname

2020 年 3 月测试："version"：“5.1.2”

Answer 8

在 react-router 的 5.1 版本中有一个名为 useLocation 的钩子，returns 当前位置对象。这在您需要了解当前 URL.

的任何时候都可能有用

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

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

React Router v4 - 如何获取当前路线？

React Router v4 - How to get current route?

reactjs

react-router

react-router-v4