React Router の基本を理解する: React でのナビゲーションの管理

React ルーターの基本

React Router は、React アプリケーションでのルーティングに使用される強力なライブラリです。これにより、開発者はアプリケーション内でルートを定義し、異なるビューまたはコンポーネント間のナビゲーションを管理できるようになります。 React Router を使用すると、動的ルーティングと URL ベースのナビゲーションを処理することで、シングルページ アプリケーション (SPA) を簡単に作成できます。

---

React Router の重要な概念

1. ルーティング: アプリケーション内で、ある URL から別の URL に移動するプロセスを指します。
2. SPA (シングル ページ アプリケーション): React Router は SPA 向けに設計されており、アプリケーションは一度ロードされ、ユーザーが別のルートに移動するとページの一部のみが更新されます。

---

React Router のコアコンポーネント

1. BrowserRouter (または HashRouter):
   • このコンポーネントは、ルーティング ロジックを保持するラッパーであり、ナビゲーションを有効にするために使用されます。
   • BrowserRouter は、HTML5 履歴 API を使用してブラウザの URL を操作し、UI の同期を維持します。
   • 古いブラウザの場合、または HTML5 履歴 API がサポートされていない場合は、HashRouter を使用できます (ただし、ハッシュベースのルーティングが使用されます)。

例:

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

   const App = () => {
     return (
       <BrowserRouter>
         <Routes />
       </BrowserRouter>
     );
   };

1. ルート:
   • コンポーネントは、アプリケーション内のすべてのルートを定義するために使用されます。これは、個々の Route 要素のコンテナとして機能します。
   • React Router v6 では、Routes が以前の Switch コンポーネントを置き換えます。

例:

   import { Routes, Route } from 'react-router-dom';

   const Routes = () => {
     return (
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
       </Routes>
     );
   };

1. ルート:
   • コンポーネントは、URL パスとコンポーネント間のマッピングを定義します。
   • パス プロパティは URL を定義し、要素プロパティはルートが一致したときにレンダリングするコンポーネントを指定します。

例:

   <Route path="/" element={<Home />} />

1. リンク:
   • コンポーネントは、ページをリロードせずに異なるルート間を移動するために使用されます。クリック イベントに反応するアンカー () タグをレンダリングし、それに応じてブラウザの URL を更新します。

例:

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

   const Navigation = () => {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   };

1. ナビゲートを使用:
   • useNavigate フックは、プログラムによって別のルートに移動するために使用されます。
   • このフックは通常、イベント ハンドラーまたは副作用の内部で使用されます。

例:

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

   const App = () => {
     return (
       <BrowserRouter>
         <Routes />
       </BrowserRouter>
     );
   };

---

基本的なルーティングの例

機能的な React アプリで React Router を示す基本的な例を次に示します。

   import { Routes, Route } from 'react-router-dom';

   const Routes = () => {
     return (
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
       </Routes>
     );
   };

説明:

• BrowserRouter コンポーネントはアプリ全体をラップしてルーティングを有効にします。
• Link コンポーネントは、ページのリロードをトリガーしないナビゲーション リンクを作成するために使用されます。
• Routes コンポーネントにはすべてのルートが含まれており、各 Route 要素は URL パスをコンポーネント (Home、About、Contact など) にマップします。
• リンクをクリックすると URL が更新され、対応するコンポーネントがレンダリングされます。

---

ネストされたルーティング

React Router は ネストされたルート もサポートしており、他のルート内でルートを定義できます。

   <Route path="/" element={<Home />} />

説明:

• /dashboard ルートには、/dashboard/profile と /dashboard/settings というネストされたルートがあります。
• 親ルート (path="dashboard/*") で * ワイルドカードを使用することにより、React Router はダッシュボード コンポーネント内で子ルートをレンダリングすることを認識します。

---

Navigate によるリダイレクト

Navigate コンポーネントまたは useNavigate フックを使用して、プログラムでユーザーを別のルートに移動できます。

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

   const Navigation = () => {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   };

説明:

• Navigate コンポーネントは、レンダリング時にユーザーを /about ルートに自動的にリダイレクトします。

---

ルートパラメータ

URL で値を渡すために使用できるルート パラメーターを含めることで、動的ルートを定義できます。

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

   const Login = () => {
     const navigate = useNavigate();

     const handleLogin = () => {
       // Perform login logic
       navigate('/dashboard');
     };

     return (
       <button onClick={handleLogin}>Login</button>
     );
   };

説明:

• ルート パスの :userId は、ルート パラメータです。
• useParams フックは UserProfile コンポーネント内で使用され、URL から userId の値を抽出し、ページ上にレンダリングします。

---

結論

React Router を使用すると、React アプリケーションのビュー間を簡単かつ効率的に移動できます。 BrowserRouter、Route、Link などのコンポーネントと useNavigate などのフックを使用すると、複雑なルーティング ロジックを備えた動的な単一ページ アプリケーションを作成できます。ルート、ネストされたルート、ルート パラメーターの処理など、React Router の基本を理解することで、React アプリでのナビゲーションを簡単に管理できるようになります。

---

以上がReact Router の基本を理解する: React でのナビゲーションの管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。