[解決済み] 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>
}
関連
-
[解決済み] react router dom v4でwebpack dev serverを構成する方法は?
-
[解決済み] react-navigation v5を使ったreact-nativeアプリのAppNavigatorの構文を更新する。
-
[解決済み] Error: yarn start - エラー コマンド "start" が見つかりません。
-
[解決済み] React JSXにおける...restの意味とは?
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] React-routerのURLを更新したり、手動で書き込んだりするとうまくいかない
-
[解決済み] React Router v4で履歴にプッシュする方法は?
-
[解決済み】オプションのパスパラメータを持つReact Router
-
[解決済み】react router v4 / v5でネストされたルート
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ReactJS: マテリアルuiのブレークポイントについて
-
[解決済み] Apolloクライアントでログアウトした後、ストアをリセットする
-
[解決済み] ReactJS: Warning: setState(...): 既存の状態遷移の間に更新することはできません
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] react jsでウィンドウを開くイベントを処理するにはどうすればよいですか?
-
[解決済み] ReactJs "インバリアント違反..." リアクトの古典的な問題
-
[解決済み] validateDOMNesting警告React
-
React はエラー TypeError を報告します。未定義のプロパティ 'XX' を読み取ることができない、問題は解決されました。
-
[解決済み] ReactコンポーネントのJest SnapshotテストにおけるSnapshotテストの仕組みとtoMatchSnapshot()関数は何をするのか?
-
[解決済み] React JSXのforEach()でHTMLが出力されない