React Routerの使い方

Reactでのルーティングの基本
React Routerは、Reactアプリケーションにルーティング機能を追加するためのライブラリです。
SPA（Single Page Application）であるReactでは、画面遷移を行う際にページ全体をリロードせずに、ルートに応じて適切なコンポーネントを表示することが重要です。本記事では、React Routerの導入から基本的な使い方までを解説します。

1. React Routerのインストール

以下のコマンドを使って、react-router-domパッケージをインストールします。

npm install react-router-dom

2. 基本的な使い方

2.1. ルーターの設定
BrowserRouterを使うことで、Reactアプリにルーティングを導入します。以下のコードは、シンプルなルーティングの例です。

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

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

export default App;

ポイント解説
BrowserRouter：URLの変更を監視し、対応するコンポーネントを表示する。
Routes：複数のルートをまとめるためのコンテナ。
Route：pathに一致するURLが呼ばれると、指定したコンポーネントを表示します。

3. 画面遷移を行うリンクの作成

React Routerでは、タグの代わりにを使用します。これにより、ページ全体のリロードをせずに画面遷移が可能になります。

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

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

export default Navbar;

4. URLパラメータの利用

URLに動的なパラメータを含めることも可能です。以下のように、ユーザーIDなどのパラメータを渡すルートを作成します。

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

function UserProfile() {
  const { id } = useParams(); // URLからidを取得
  return <h1>User ID: {id}</h1>;
}

<Routes>
  <Route path="/user/:id" element={<UserProfile />} />
</Routes>

5. 404ページ（Not Found）の設定

どのルートにも一致しない場合に表示する404ページを設定します。

function NotFound() {
  return <h1>404 - Page Not Found</h1>;
}

<Routes>
  <Route path="*" element={<NotFound />} />
</Routes>

6. ネストされたルートの実装

複雑なアプリでは、ネストされたルートが必要になることがあります。

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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* 子ルートがここにレンダリングされる */}
    </div>
  );
}

<Routes>
  <Route path="dashboard" element={<Dashboard />}>
    <Route path="settings" element={<h2>Settings</h2>} />
  </Route>
</Routes>

7. ナビゲーショ

ボタンのプログラム的実行
ボタンをクリックしたときにコードで画面遷移を行いたい場合、useNavigateを使用します。

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

function Home() {
  const navigate = useNavigate();

  const goToAbout = () => {
    navigate('/about');
  };

  return <button onClick={goToAbout}>Go to About</button>;
}

export default Home;

8. React Routerのトラブルシューティング

ページが白くなる：BrowserRouterが正しく設定されているか確認してください。
パスが正しくない場合：パスのスペルミスやRouteタグの使い方を再確認しましょう。
ネストされたルートが表示されない：を親コンポーネントに設置することを忘れないようにしましょう。

9. React Routerのバージョンアップに伴う変更点

React Router v6では、SwitchがRoutesに置き換わり、elementプロパティを使ってコンポーネントを渡す必要があります。

まとめ

React Routerは、シンプルなルーティングからネストされたルート、URLパラメータまで幅広く対応可能な強力なライブラリです。
リンクやURLパラメータの活用により、Reactアプリケーションでのユーザー体験を大幅に向上させます。

毎日更新していますので、@y-t0910をフォロー,いいねしていただけると嬉しいです。