React学習ログ No.16

React Router 学習メモ

1. 目的

• React Routerの基本的な使い方を理解する
• SPA（シングルページアプリケーション）における画面遷移の方法を学習

2. インストールと基本設定

• インストール

  npm install react-router-dom
  

• index.js (または main.jsx) での設定
  • <BrowserRouter> で <App /> を囲む
  • メモ: これでアプリ全体でブラウザのURLとUIを同期できるようになる

3. 基本的なルーティング (<Routes>, <Route>)

• URLパスと表示するコンポーネントを紐付ける
• App.js などで設定する

  import { Routes, Route } from 'react-router-dom';
  import HomePage from './pages/HomePage';
  import AboutPage from './pages/AboutPage';
  
  function App() {
    return (
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    );
  }
  

4. 画面遷移 (<Link>)

• <a> タグの代わり
• メモ: <a> との違いは、ページ全体がリロードされないこと。これがSPAの重要ポイント

  import { Link } from 'react-router-dom';
  
  <nav>
    <Link to="/">ホーム</Link>
    <Link to="/about">概要</Link>
  </nav>
  

5. URLパラメータの取得 (useParams)

• 動的なルート（例： /users/1, /users/100）を作るための機能
• Route定義:
  • path="/users/:id" のように : (コロン) を使う
• 値の取得:
  • useParams フックを使う

  import { useParams } from 'react-router-dom';
  
  function UserPage() {
    const { id } = useParams(); // path="/users/:id" の 'id' が取れる
    return <p>ユーザーID: {id}</p>;
  }
  

6. ネスト（入れ子）ルート (<Outlet>)

• 共通レイアウト（ヘッダー、サイドバーなど）の中で、中身だけ切り替えたいときに使う
• Route定義:
  • <Route> を入れ子にする
• <Outlet />:
  • 親コンポーネント（共通レイアウト）側に置く
  • メモ: 「ここに子コンポーネントを表示してね」という目印（プレースホルダー）

  // 親コンポーネント (Layout.js)
  import { Outlet } from 'react-router-dom';
  function Layout() {
    return (
      <div>
        <header>共通ヘッダー</header>
        <main>
          <Outlet /> {/* ← ここに子コンポーネントが入る */}
        </main>
      </div>
    );
  }
  
  // ルート定義 (App.js)
  <Route path="/" element={<Layout />}>
    <Route index element={<HomePage />} /> {/* path="/" の中身 */}
    <Route path="about" element={<AboutPage />} /> {/* path="/about" の中身 */}
  </Route>
  

• index 属性は、親のパス ( / ) と同じ場合に表示するコンポーネントを指定する

7. 404（Not Found）ページ

• どのルートにも一致しなかった場合のページ
• path="*" を使う

  <Routes>
    {/* ... 他のルート ... */}
    <Route path="*" element={<NotFoundPage />} />
  </Routes>
  

8. （その他）学んだフックやコンポーネント

• useNavigate:
  • const navigate = useNavigate();
  • Maps('/login') のように、関数実行でページ遷移させる
  • メモ: ログイン成功後やフォーム送信後など、Link 以外のタイミングで遷移させたいときに使う
• NavLink:
  • <Link> と似ているが、現在表示中のページへのリンクに class="active" などを自動で付けてくれる。ナビゲーションメニューで便利