Con 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}`)

I think the author's of React Router (v4) just added that withRouter HOC to appease certain users. However, I believe the better approach is to just use render prop and make a simple PropsRoute component that passes those props. This is easier to test as you it doesn't "connect" the component like withRouter does. Have a bunch of nested components wrapped in withRouter and it's not going to be fun. Another benefit is you can also use this pass through whatever props you want to the Route. Here's the simple example using render prop. (pretty much the exact example from their website 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 } />

Con 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}`)

Add

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

然后更改组件导出

export default withRouter(ComponentName)

然后你可以直接在组件本身中访问路由(不涉及项目中的任何其他内容)，使用:

window.location.pathname

2020年3月测试，“版本”:“5.1.2”

在react-router的5.1版本中，有一个叫做useLocation的钩子，它返回当前位置对象。当您需要知道当前URL时，这可能很有用。

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

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

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