React Router gere le routage cote client, les transitions de vues et les mises en page imbriquees pour les SPA React.
Configuration de Base des Routes (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>
);
}
Liens et Navigation (Link vs 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 detecte automatiquement la route active pour appliquer des styles conditionnels :
Paramètres Dynamiques et Navigation Programmatique
Extraction des parametres avec 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>;
}
Navigation par code avec 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>;
}
Routes Imbriquées et Outlet
Le composant <Outlet /> definit l'emplacement ou les routes enfants sont rendues :
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>