reactjs - 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 /> ？

Answer 1

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

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

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