1. ホーム
  2. reactjs

[解決済み] React Router v4 - 現在のルートを取得する方法は?

2022-03-17 15:30:31

質問

を表示させたい。 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 /> ?

解決方法は?

react-routerの5.1リリースでは、フックとして 使用場所 これは現在のロケーションオブジェクトを返します。これは、現在のURLを知る必要があるときに便利です。

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

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