React Routerを使った動的なナビゲーション

作成日 2025.01.07
React
React

React RouterはReactアプリケーションでルーティングを管理するためのライブラリです。本記事では、動的なナビゲーションの実装方法を詳しく説明します。

1. 1. React Routerのインストール
2. 2. 基本的なルーティングの設定
3. 3. 動的なルーティング
4. 4. useParamsを使った動的パラメータ取得
5. 5. useNavigateを使ったプログラムによるナビゲーション
6. 6. リンクを使用したナビゲーション
7. 7. ネストされたルート
8. 8. 404ページの設定
9. 9. Protected Route (保護されたルート)
10. 10. レイアウトコンポーネント
11. 11. URLクエリパラメータの取得
12. 12. まとめ

1. React Routerのインストール

React Routerをインストールしてプロジェクトに追加します。

npm install react-router-dom

2. 基本的なルーティングの設定

React Routerを使って基本的なルートを設定します。

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

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

3. 動的なルーティング

パラメータを含む動的ルートを設定します。

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

4. useParamsを使った動的パラメータ取得

useParamsフックを使用してURLパラメータを取得します。

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

function UserProfile() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

5. useNavigateを使ったプログラムによるナビゲーション

useNavigateを使用してプログラムでページを移動します。

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

function Home() {
  const navigate = useNavigate();
  return <button onClick={() => navigate('/about')}>Go to About</button>;
}

6. リンクを使用したナビゲーション

Linkコンポーネントを使用してページを移動します。

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

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

7. ネストされたルート

子ルートを設定して階層的なナビゲーションを作成します。

<Route path="/dashboard/*" element={<Dashboard />} />

8. 404ページの設定

存在しないページにアクセスした場合の404ページを設定します。

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

9. Protected Route (保護されたルート)

認証が必要なルートを設定します。

function ProtectedRoute({ children }) {
  const isAuthenticated = true; // 認証ロジック
  return isAuthenticated ? children : <Navigate to="/login" />;
}

10. レイアウトコンポーネント

共通のレイアウトを設定します。

function Layout() {
  return (
    <div>
      <header>Header</header>
      <main><Outlet /></main>
      <footer>Footer</footer>
    </div>
  );
}

11. URLクエリパラメータの取得

useSearchParamsを使用してクエリパラメータを取得します。

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

function SearchPage() {
  const [searchParams] = useSearchParams();
  return <div>Query: {searchParams.get('query')}</div>;
}