React Router

React Router は、React アプリケーションにおいてクライアントサイドルーティングを管理するための強力なライブラリです。以下に、React Router の基本的な概念と使用方法の例を示します。

React Router のインストール

まず、Web アプリケーション用の React Router バージョンである react-router-dom をインストールします：

npm install react-router-dom

基本的な使い方

以下は、React アプリケーションで React Router を設定して使用する簡単な例です。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Home = () => <h2>ホーム</h2>;
const About = () => <h2>アバウト</h2>;
const Dashboard = () => <h2>ダッシュボード</h2>;

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/about">アバウト</Link>
            </li>
            <li>
              <Link to="/dashboard">ダッシュボード</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

動的ルーティング

React Router は、URL パラメータを使用して動的ルーティングをサポートしています。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom';

const Home = () => <h2>ホーム</h2>;
const About = () => <h2>アバウト</h2>;

const User = () => {
  const { id } = useParams();
  return <h2>ユーザーID: {id}</h2>;
};

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/about">アバウト</Link>
            </li>
            <li>
              <Link to="/user/123">ユーザー123</Link>
            </li>
            <li>
              <Link to="/user/456">ユーザー456</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/user/:id" element={<User />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

ルートリダイレクト

リダイレクトを行うために Navigate コンポーネントを使用できます。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Navigate } from 'react-router-dom';

const Home = () => <h2>ホーム</h2>;
const About = () => <h2>アバウト</h2>;
const Dashboard = () => <h2>ダッシュボード</h2>;

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/about">アバウト</Link>
            </li>
            <li>
              <Link to="/dashboard">ダッシュボード</Link>
            </li>
            <li>
              <Link to="/old-dashboard">旧ダッシュボード (リダイレクト)</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/old-dashboard" element={<Navigate to="/dashboard" />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

ルートガードと保護されたルート

useNavigate フックを使用してルートガードや保護されたルートを実装できます。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';

const Home = () => <h2>ホーム</h2>;
const About = () => <h2>アバウト</h2>;

const Dashboard = () => {
  const navigate = useNavigate();
  const isAuthenticated = false; // 認証されていないと仮定

  if (!isAuthenticated) {
    navigate('/');
  }

  return <h2>ダッシュボード</h2>;
};

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/about">アバウト</Link>
            </li>
            <li>
              <Link to="/dashboard">ダッシュボード</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

ルート変更の監視

useNavigate と useEffect フックを使用してルート変更を監視できます。

import React, { useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';

const Home = () => <h2>ホーム</h2>;
const About = () => <h2>アバウト</h2>;

const Dashboard = () => <h2>ダッシュボード</h2>;

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

  useEffect(() => {
    const handleRouteChange = (url) => {
      console.log('ルートが変更されました:', url);
    };

    // ルート変更の監視
    navigate.listen(handleRouteChange);

    return () => {
      // 監視の解除
      navigate.remove(handleRouteChange);
    };
  }, [navigate]);

  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/about">アバウト</Link>
            </li>
            <li>
              <Link to="/dashboard">ダッシュボード</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

REACT Router