1. React Router の紹介

React Router は、React アプリケーションでルーティングを処理するためのライブラリです。これにより、アプリはページ全体をリロードすることなく、さまざまなコンポーネントやビュー間を移動できるようになり、ユーザー エクスペリエンスがシームレスになります。

2. 基本設定

まず、react-router-dom:
をインストールします。

npm install react-router-dom

BrowserRouter、Routes、および Route を使用して基本的なルーティングを設定します:

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

const Home = () => 
Home
;
const About = () => 
About
;

const App = () => {
  return (
    } />
        } />
      
  );
};

export default App;

3. ネストされたルーティング

より複雑なアプリの場合は、ルートをネストできます。親コンポーネントでネストされたルートを設定する方法は次のとおりです:

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

const Dashboard = () => 
Dashboard Home
;
const Profile = () => 
Your Profile
;

const DashboardLayout = () => {
  return (
    

      } />
        } />
      
  );
};

const App = () => {
  return (
    } />
      
  );
};

export default App;

4. ダイナミックルーティング

動的ルーティングを使用すると、URL でパラメータを渡すことができます。動的ルートを定義してアクセスする方法は次のとおりです:

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

const User = () => {
  const { id } = useParams();
  return 
User ID: {id}
;
};

const App = () => {
  return (
    } />
      
  );
};

export default App;

5. 保護されたルート

保護されたルートを実装するには、カスタム PrivateRoute コンポーネントを作成できます:

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

const useAuth = () => {
  const user = { loggedIn: true }; // Replace with actual auth logic
  return user && user.loggedIn;
};

const PrivateRoute = () => {
  const isAuth = useAuth();
  return isAuth ?  : ;
};

const App = () => {
  return (
    } />
        }>
          } />
        
      
  );
};

export default App;

6. プログラムによるナビゲーション

フォーム送信後など、プログラムで操作したい場合があります。 React Router v6 で useNavigate フックを使用する:

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

const Login = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Login logic here...
    navigate('/dashboard');
  };

  return (
    

      
Login
      Login
    
  );
};

export default Login;

7. 404ページ

キャッチオール ルートを作成して 404 (Not Found) エラーを処理します:

const NotFound = () => 
404 - Page Not Found
;

const App = () => {
  return (
    } />
        } />
        } />
      
  );
};

export default App;

8. パフォーマンスに関する考慮事項

大規模なアプリケーションの場合、遅延読み込みルートによりパフォーマンスが向上する可能性があります。 React.lazy() と Suspense を使用して遅延読み込みを実装する方法は次のとおりです:

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

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

const App = () => {
  return (
    Loading...}>
        } />
          } />
        
  );
};

export default App;