React アプリケーションでは、URL の書式設定は、 routing ページの移動や対応するコンテンツの表示において重要な役割を果たします。 React で管理するにはライブラリ routing を使用します 。 ここでは、 React アプリケーションで URL をフォーマットし、処理するために 使用する方法に関する基本的なガイドを示します。 React Router React Router routing
インストール React Router
ターミナルでプロジェクト ディレクトリを開き、次のコマンドを実行してインストールします 。 React Router npm install react-router-dom
必要なコンポーネントを React コンポーネントにインポートします。 React Router
ルートの定義
この コンポーネントを使用して React アプリケーションをラップし、ベース URL 形式を設定します。 <BrowserRouter>
この <Route>
コンポーネントを使用して、アプリケーション内でルートを定義します。
例:
Link を 定義する
このコンポーネントを使用して、 アプリケーション内に ナビゲーションを作成します。 <Link>
link
例:
アクセスパスパラメータ
パスパラメータにアクセスするには、形式の属性 <Route>
を持つコンポーネント を使用します 。 path
/users/:id
で定義されたコンポーネント内では、 を使用して パス パラメータの値にアクセス <Route>
できます。 useParams()
例:
使用 Switch および Redirect
この コンポーネントを使用して、パスに一致する最初のルートのみをレンダリングします。 <Switch>
ユーザーは、ある指定されたパスから別のパスへコンポーネントを 使用します 。 <Redirect>
redirect
例:
routing これらは、URL フォーマットとReact での を使用する ための基本的な概念です 。 を利用すると 、URL に基づいてさまざまなコンテンツをナビゲートして表示する機能を備えた柔軟な React アプリケーションを作成できます。 React Router React Router