React Router - Navigation dans vos SPAs

Salut ! Maintenant qu'on maîtrise les composants et les hooks, on va s'attaquer à la navigation dans nos applications React.

Quand ton app grandit, tu vas vouloir avoir plusieurs "pages" avec des URLs différentes. C'est là qu'intervient React Router !

---

Qu'est-ce que le routing ?

Le problème des SPAs

Dans une Single Page Application (SPA), techniquement on n'a qu'une seule page HTML. Mais on veut quand même :

• Des URLs différentes pour chaque "page" (/home, /about, /profile)
• Le bouton "Précédent" du navigateur qui marche
• Pouvoir partager des liens
• Un bon SEO

React Router à la rescousse

React Router va nous permettre de :

• Associer des composants à des URLs
• Naviguer entre les pages sans rechargement
• Gérer l'historique du navigateur
• Passer des paramètres dans les URLs

---

Installation de React Router

npm install react-router-dom

C'est tout ! React Router DOM est la version pour le web (il y a aussi React Router Native pour React Native).

---

Configuration de base

1. Wrapper votre app avec BrowserRouter

Dans votre main.jsx :

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)

2. Définir les routes dans App.jsx

import { Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import Contact from './pages/Contact'
import NotFound from './pages/NotFound'

function App() {
  return (
    <div>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  )
}

export default App

3. Créer vos composants pages

// src/pages/Home.jsx
function Home() {
  return (
    <div>
      <h1>🏠 Accueil</h1>
      <p>Bienvenue sur la page d'accueil !</p>
    </div>
  )
}

export default Home

// src/pages/About.jsx
function About() {
  return (
    <div>
      <h1>📖 À propos</h1>
      <p>Voici notre histoire...</p>
    </div>
  )
}

export default About

---

Navigation avec Link et NavLink

Le problème avec <a href="">

Si vous utilisez des liens HTML classiques, toute la page se recharge à chaque clic. On perd tous les avantages d'une SPA !

La solution : Link

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

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

NavLink pour les liens actifs

NavLink permet de styliser le lien de la page courante :

import { NavLink } from 'react-router-dom'

function Navigation() {
  return (
    <nav>
      <NavLink
        to="/"
        className={({ isActive }) => isActive ? 'active-link' : ''}
      >
        Home
      </NavLink>
      <NavLink
        to="/about"
        className={({ isActive }) => isActive ? 'active-link' : ''}
      >
        About
      </NavLink>
    </nav>
  )
}

Next.js App Router (pour les projets Next.js)

// app/page.js (Next.js 13+)
export default function HomePage() {
  return <h1>Page d'accueil</h1>
}

// app/blog/page.js
export default function BlogPage() {
  return <h1>Blog</h1>
}

// Navigation en Next.js
import Link from 'next/link'

function Navigation() {
  return (
    <nav>
      <Link href="/">Accueil</Link>
      <Link href="/blog">Blog</Link>
    </nav>
  )
}

Ressources pour aller plus loin

• 📚 React Router Documentation
• 🎯 React Router Tutorial
• 🔄 Migration Guide v5 → v6
• 🚀 TanStack Router (alternative moderne)
• 📖 Next.js Routing (pour les projets Next.js)