React Router は、React によるシングルページアプリケーション (SPA) にクライアントサイドルーティングと柔軟なネストレイアウトを提供します。
基本的なルーティング設定 (React Router v6+)
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}
リンクとナビゲーション (Link と NavLink)
import { Link, NavLink } from 'react-router-dom';
// Standard declarative navigation link
<Link to="/about">About Us</Link>
// NavLink with active styling
<NavLink
to="/dashboard"
className={({ isActive }) => (isActive ? 'active-link' : 'normal-link')}
>
Dashboard
</NavLink>
NavLink は現在のアクティブなルートを自動判別し、アクティブ用クラスを動的に適用できます：
動的 URL パラメータとプログラムによる画面遷移
useParams によるパラメータ取得
// Route definition: <Route path="/users/:userId" element={<UserProfile />} />
import { useParams } from 'react-router-dom';
export function UserProfile() {
const { userId } = useParams();
return <h2>Viewing Profile: {userId}</h2>;
}
useNavigate によるプログラム遷移
import { useNavigate } from 'react-router-dom';
export function LoginForm() {
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
await loginUser();
// Programmatic redirect after successful login
navigate('/dashboard', { replace: true });
};
return <form onSubmit={handleSubmit}>...</form>;
}
ネストされたルートと Outlet
<Outlet /> コンポーネントは、マッチした子ルートのコンポーネントが描画されるプレースホルダーです：
import { Routes, Route, Outlet } from 'react-router-dom';
function Layout() {
return (
<div className="app-container">
<nav>Sidebar Navigation</nav>
<main>
{/* Child route matches render here */}
<Outlet />
</main>
</div>
);
}
// Router structure:
<Routes>
<Route path="/admin" element={<Layout />}>
<Route index element={<AdminDashboard />} />
<Route path="settings" element={<AdminSettings />} />
</Route>
</Routes>