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

Question

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

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

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

原文由 Raphael Rafatpanah 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 joy08 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 React 路由器 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;
  }
}

原文由 Con Posidielov 发布，翻译遵循 CC BY-SA 4.0 许可协议