初心者のためのガイド: React Router V6 の使い方

React Router は、React アプリケーションでルーティングを実装するために使用できる最も人気のあるライブラリです。ページ ナビゲーション、クエリ パラメータなど、さまざまなルーティング タスクを処理するためのコンポーネントベースのアプローチを提供します。

React Router V6 では、以前のバージョンに存在していた落とし穴に対処し、改善されたルーティング ソリューションを提供するために、ルーティング アルゴリズムにいくつかの重要な変更が加えられました。

React Router V6 を使用したルーティングの開始

開始するには、React アプリケーションを作成します。または、Vite を使用して React プロジェクトを設定します。プロジェクトを作成したら、react-router-domパッケージをインストールします。

npm install react-router-dom

React Router を使用したルートの作成

ルートを作成するには、まずアプリケーション全体をBrowserRouterコンポーネントでラップします。index.jsxまたはmain.jsxファイルのコードを次のように更新します。

import React from 'react'import ReactDOM from 'react-dom/client'import App from './App.jsx'import { BrowserRouter as Router } from 'react-router-dom';ReactDOM.createRoot(document.getElementById('root')).render(,)

App コンポーネントを BrowserRouter コンポーネントでラップすると、アプリケーション全体が React Router ライブラリによって提供されるルーティング コンテキストと機能にアクセスできるようになります。

Routes コンポーネントの使用

アプリケーションを BrowserRouter コンポーネントでラップしたら、ルートを定義できます。

Routesコンポーネントは、React Router v5 で以前使用されていたSwitchコンポーネントを改良したものです。このコンポーネントは、相対ルーティング、自動ルート ランキング、ネストしたルートを操作する機能をサポートしています。

通常、ルートはアプリケーションの最上位レベル、多くの場合 App コンポーネント内で追加します。ただし、プロジェクトの構造によっては、他の場所で定義することもできます。

App.jsxファイルを開き、定型的な React コードを次のように置き換えます。

import './App.css'import { Routes, Route } from 'react-router-dom';import Dashboard from './pages/Dashboard';import About from './pages/About';function App() {return ()}export default App

このルーティング構成では、特定の URL パスを対応するページ コンポーネント (Dashboard と About) にマッピングして、ユーザーが特定の URL にアクセスしたときにアプリが適切なコンポーネントをレンダリングできるようにします。

Route コンポーネント内のelementプロパティに注目してください。これにより、コンポーネントの名前ではなく、機能コンポーネントを渡すことができます。これにより、ルートとその関連コンポーネントにプロパティを渡すことができます。

srcディレクトリで新しいpagesディレクトリを作成し、2 つの新しいファイルDashboard.jsxとAbout.jsxを追加します。これらのファイル内で機能コンポーネントを定義して、ルートをテストします。

createBrowserRouter を使用してルートを定義する

React Router のドキュメントでは、React Web アプリケーションのルーティング構成を定義するためにcreateBrowserRouterコンポーネントを使用することを推奨しています。このコンポーネントは、引数としてルートの配列を受け取るBrowserRouterの軽量な代替手段です。

このコンポーネントを使用すると、App コンポーネント内でルートを定義する必要はありません。代わりに、index.jsxまたはmain.jsxファイル内ですべてのルート構成を概説できます。

このコンポーネントを使用する方法の例を次に示します。

import React from 'react'import ReactDOM from 'react-dom/client'import { createBrowserRouter, RouterProvider } from "react-router-dom";import App from './App.jsx'import Dashboard from './pages/Dashboard';import About from './pages/About';const router = createBrowserRouter([{path: "/",element: ,},{path: "/dashboard",element: ,},{path: "/about",element: ,},]);ReactDOM.createRoot(document.getElementById("root")).render();

ルーティング構成では、createBrowserRouterとRouterProviderコンポーネントを使用して、React アプリケーションのルーティング システムを作成します。

ただし、この実装との唯一の違いは、BrowserRouter コンポーネントを使用してアプリケーションをラップするのではなく、RouterProviderコンポーネントを使用してRouterコンテキストをアプリケーション内のすべてのコンポーネントに渡すことです。

ページが見つからないルートの実装

Route コンポーネントのpathプロパティは、提供されたパスを現在の URL と比較して、必要なコンポーネントをレンダリングする前に一致があるかどうかを判断します。

ルートが一致しない場合を処理するには、404 ページが見つからないエラーを管理する特定のルートを作成できます。このルートを含めることで、ユーザーがアクセスできない URL にアクセスした場合に、ユーザーが意味のある応答を受け取ることができます。

404 ルートを実装するには、このルートを Routes コンポーネント内に追加します。

// Route コンポーネントを使用// createBrowserRouter を使用{ path: "*", element: , },

次に、カスタムのNotFound.jsxコンポーネントを作成し、最後に CSS モジュールを使用してコンポーネントのスタイルを設定します。

アスタリスク (*) は、指定されたルートのいずれも現在の URL と一致しないシナリオを処理するワイルドカード文字です。

useNavigate フックを使用したプログラムによるナビゲーション

useNavigateフックは、アプリケーションでのナビゲーションをプログラムで処理する方法を提供します。このフックは、ボタンのクリックやフォームの送信などのユーザーの操作やイベントに応じてナビゲーションをトリガーする場合に特に便利です。

プログラムによるナビゲーションにuseNavigateフックを使用する方法を見てみましょう。About.jsx関数コンポーネントを作成したと仮定して、React Router パッケージからフックをインポートします。

import { useNavigate } from 'react-router-dom';

次に、クリックすると指定されたルートへのナビゲーションがトリガーされるボタンを追加します。

function About() {const navigate = useNavigate();const handleButtonClick = () => {navigate("/");};return (// コードの残りの部分 ...);}export default About;

React Router v6 で導入された useNavigate フックと useNavigation フックは、密接に関連した名前にもかかわらず、異なる目的を果たすことに注意することが重要です。

useNavigation フックを使用すると、進行中のナビゲーション状態やその他の詳細など、ナビゲーションに関連する詳細にアクセスできます。これは、進行中のプロセスに関する視覚的なフィードバックを提供するために、ロードスピナーなどの UI 要素をレンダリングする場合に役立ちます。

useNavigation フックを利用する方法の例を次に示します。

import { useNavigation } from "react-router-dom";function SubmitButton() {const navigation = useNavigation();const buttonText =navigation.state === "submitting"? "Saving...": navigation.state === "loading"? "Saved!": "Go";return {buttonText};}

この例では、SubmitButtonコンポーネントは、useNavigation フックから取得したナビゲーション状態に基づいてテキストを動的に更新します。

これらのフックは役割が異なりますが、一緒に使用することもできます。useNavigate フックを使用してナビゲーションプロセスを開始し、useNavigation フックを使用してリアルタイムのナビゲーションの詳細を取得します。これにより、ブラウザーにレンダリングするフィードバック UI の種類を導き出すことができます。

useRoutes フックの使用

このフックを使用すると、オブジェクト内でルートパスとその対応するコンポーネントを定義できます。その後、フックを使用してルートを照合し、関連するコンポーネントを表示します。

フックを使用する簡単な例を次に示します。

import { useRoutes } from 'react-router-dom';import Dashboard from './Dashboard';import About from './About';const routes = [{path: '/',element: ,},{path: '/about',element: ,},];function App() {const routeResult = useRoutes(routes);return routeResult;}export default App;

この例では、routesオブジェクトは URL パスのコンポーネントへのマッピングを定義します。Appコンポーネントはこのフックを使用して現在の URL を照合し、照合されたルートに基づいて適切なコンポーネントをレンダリングします。

このフックを使用すると、ルーティングロジックを詳細に制御でき、アプリケーションのカスタムルート処理ロジックを簡単に作成できます。

React アプリケーションでのルーティングの処理

React 自体にはルーティングタスクを処理するための組み込みメカニズムが含まれていませんが、React Router はこのギャップを埋めます。インタラクティブでユーザーフレンドリーなアプリケーションを簡単に作成するために使用できるさまざまなルーティングコンポーネントとユーティリティ関数を提供します。