# Routing (React Router v6)

Navigation et gestion des URLs

# Configuration de base

## React Router v6 — Configuration de base

```
npm install react-router-dom
```

### Structure minimale

```
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Accueil</Link>
        <Link to="/about">À propos</Link>
        <Link to="/users">Utilisateurs</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Accueil />} />
        <Route path="/about" element={<About />} />
        <Route path="/users" element={<Users />} />
        <Route path="/users/:id" element={<UserDetail />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}
```

### Routes imbriquées (Nested Routes)

```
<Route path="/dashboard" element={<Dashboard />}>
  <Route index element={<DashboardHome />} />
  <Route path="stats" element={<Stats />} />
  <Route path="settings" element={<Settings />} />
</Route>

// Dans Dashboard.jsx, utiliser <Outlet /> pour afficher les enfants
import { Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* Ici s'affichent DashboardHome, Stats ou Settings */}
    </div>
  );
}
```

# Hooks de navigation

## Hooks React Router v6

### useParams — paramètres d'URL

```
// Route : /users/:id
function UserDetail() {
  const { id } = useParams();
  // id = "42" pour /users/42
  return <p>Utilisateur #{id}</p>;
}
```

### useNavigate — navigation programmée

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

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

  const handleSubmit = async () => {
    await loginUser();
    navigate('/dashboard');           // Aller à
    navigate(-1);                     // Page précédente
    navigate('/profile', { replace: true }); // Remplacer l'historique
  };
}
```

### useLocation — URL courante

```
import { useLocation } from 'react-router-dom';

function Breadcrumb() {
  const location = useLocation();
  // location.pathname = "/dashboard/stats"
  // location.search = "?page=2"
  // location.state = { from: "/login" }
  return <p>Vous êtes ici : {location.pathname}</p>;
}
```

### useSearchParams — query string

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

function Recherche() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q') || '';

  return (
    <input
      value={query}
      onChange={(e) => setSearchParams({ q: e.target.value })}
      placeholder="Rechercher..."
    />
  );
  // URL : /recherche?q=react
}
```

### Route protégée

```
function PrivateRoute({ children }) {
  const { isAuthenticated } = useAuth();
  const location = useLocation();

  if (!isAuthenticated) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
}

// Utilisation
<Route path="/dashboard" element={
  <PrivateRoute><Dashboard /></PrivateRoute>
} />
```