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

例:

   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 サイトの他の関連記事を参照してください。