ステップ 2: 個別のコンポーネントを作成する

Home.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

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

export default App;




<p><strong>.js について</strong><br>
</p>

<pre class="brush:php;toolbar:false">import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

NotFound.js

import React from 'react';

const About = () => {
  return <h2>About Us</h2>;
};

export default About;

React Router v6 による動的ルーティング

ユーザー ID が URL の一部であるユーザー プロフィール ページなどの動的ルートを処理するために、React Router v6 は useParams フックを提供します。

ステップ 1: 動的ルートを定義する

import React from 'react';

const NotFound = () => {
  return <h2>Page Not Found</h2>;
};

export default NotFound;

説明:

• :userId は、ルート パス內(nèi)の動的セグメントです。 useParams フックを使用すると、UserProfile コンポーネントの userId の値にアクセスできます。
• /user/123 に移動すると、UserProfile コンポーネントは userId を 123 としてレンダリングして表示します。

React Router v6 のネストされたルート

ネストされたルートを使用すると、親ルート內(nèi)にサブルートを定義することで複雑なレイアウトを構(gòu)築できます。

ステップ 1: 親ルートと子ルートを定義する

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

const UserProfile = () => {
  const { userId } = useParams();  // Extract the userId from the URL

  return <h2>User Profile for ID: {userId}</h2>;
};

const App = () => {
  return (
    <Routes>
      <Route path="/user/:userId" element={<UserProfile />} />
    </Routes>
  );
};

export default App;

説明:

• ダッシュボード コンポーネントには、概要と設(shè)定用のネストされたルートが含まれています。
• 親ルートの /* により、すべての子ルートが /dashboard で処理されるようになります。

React Router v6 フック

React Router v6 には、ルーティング情報をナビゲートしてアクセスするためのいくつかのフックが導(dǎo)入されています。

1. useNavigate: プログラムで別のルートに移動します。
2. useParams: 動的 URL パラメーターにアクセスします。
3. useLocation: 現(xiàn)在の場所 (URL) に関する情報を取得します。
4. useMatch: 現(xiàn)在の URL を指定されたルートと照合します。
5. useResolvedPath: パスを絶対 URL に解決します。

例: useNavigate フック

useNavigate フックを使用すると、アプリケーション內(nèi)でプログラムによるナビゲーションが可能になります。

npm install react-router-dom@6
# or
yarn add react-router-dom@6

React Router v6 のベスト プラクティス

• デフォルトで完全一致: React Router v6 はデフォルトでルートを正確に一致させるため、正確を指定しなくてもルート マッチングを簡単に処理できるようになります。
• 要素 Prop を使用する: コンポーネント prop を使用する代わりに JSX を要素 prop に直接渡し、コードを簡素化し、レンダリング関數(shù)の必要性を減らします。
• ネストされたルーティング: ネストされたルートを使用して、子ルートを持つ複雑なページ レイアウトを構(gòu)築し、コードをモジュール化して保守しやすく保ちます。
• ワイルドカード ルートによる 404 の処理: ワイルドカード * を使用して、一致しないルートをすべてキャッチし、404 ページを表示するか、ユーザーをデフォルト ルートにリダイレクトします。

結(jié)論

React Router v6 では、よりシンプルな API、より優(yōu)れたルート マッチング、動的ルートとネストされたルートのサポートの強化など、以前のバージョンに比べていくつかの改善が加えられています。 useNavigate、useParams、useLocation などのフックを活用することで、React アプリケーションで強力で柔軟なルーティング システムを構(gòu)築できます。