Le Routing en React - Cours n°2

Routes Statiques et Imbriquées

Les Routes Imbriquées : Une Histoire de Poupées Russes 🪆

Imaginez votre application comme une grande maison. Jusqu'à présent, on avait juste différentes pièces (routes) au rez-de-chaussée. Mais que faire si on veut des pièces dans des pièces ? C'est là qu'interviennent les routes imbriquées !

// src/pages/Dashboard.jsx
import { Outlet } from 'react-router-dom'

export default function Dashboard() {
  return (
    <div className="dashboard">
      <h1>Dashboard</h1>
      <nav>
        <Link to="/dashboard/profile">Mon Profil</Link>
        <Link to="/dashboard/settings">Paramètres</Link>
      </nav>
      {/* Outlet est comme une fenêtre qui montre le contenu des routes enfants */}
      <Outlet />
    </div>
  )
}

// src/pages/dashboard/Profile.jsx
export default function Profile() {
  return <div>Mon super profil !</div>
}

// src/pages/dashboard/Settings.jsx
export default function Settings() {
  return <div>Mes paramètres préférés</div>
}

// src/App.jsx
function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        {/* Route parent */}
        <Route path="/dashboard" element={<Dashboard />}>
          {/* Routes enfants */}
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </>
  )
}

Layout Partagé : Ne Vous Répétez Pas !

Un layout, c'est comme un template qui enveloppe vos pages. Créons un layout général :

// src/components/MainLayout.jsx
import { Outlet } from 'react-router-dom'
import Navbar from './Navbar'
import Footer from './Footer'

export default function MainLayout() {
  return (
    <div className="main-layout">
      <Navbar />
      <main>
        <Outlet />
      </main>
      <Footer />
    </div>
  )
}

// src/App.jsx mise à jour
function App() {
  return (
    <Routes>
      <Route element={<MainLayout />}>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Route>
    </Routes>
  )
}

Jour 3-4 : Navigation Comme Un Pro 🎮

Le Link de Base, C'est Bien... Mais on Peut Faire Mieux !

// src/components/SuperNavbar.jsx
import { NavLink, useLocation } from 'react-router-dom'

export default function SuperNavbar() {
  const location = useLocation() // Donne des infos sur l'URL actuelle

  return (
    <nav>
      <NavLink
        to="/"
        className={({ isActive }) =>
          `nav-link ${isActive ? 'active' : ''}`
        }
      >
        Accueil
      </NavLink>

      {/* Regardez cette beauté ! Un menu déroulant qui sait où il est */}
      <div className="dropdown">
        <NavLink
          to="/dashboard"
          className={({ isActive }) =>
            `nav-link ${isActive || location.pathname.startsWith('/dashboard/')
              ? 'active'
              : ''
            }`
          }
        >
          Dashboard
        </NavLink>
      </div>
    </nav>
  )
}

Navigation Programmatique : Téléportation à la Demande !

Parfois, on veut naviguer après une action (comme un clic sur un bouton ou après avoir soumis un formulaire) :

// src/components/LoginForm.jsx
import { useNavigate } from 'react-router-dom'

export default function LoginForm() {
  const navigate = useNavigate()

  const handleSubmit = (e) => {
    e.preventDefault()
    // Imaginons qu'on vérifie le login ici...

    // Puis on redirige vers le dashboard
    navigate('/dashboard', {
      state: { message: 'Bienvenue !' },
      replace: true // Remplace l'entrée dans l'historique
    })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Mot de passe" />
      <button type="submit">Connexion</button>

      {/* Bouton retour */}
      <button
        type="button"
        onClick={() => navigate(-1)}
      >
        Retour
      </button>
    </form>
  )
}

Le Petit Plus : Navigation avec Animation ! ✨

// src/components/AnimatedRoutes.jsx
import { AnimatePresence, motion } from 'framer-motion'
import { Routes, Route, useLocation } from 'react-router-dom'

export default function AnimatedRoutes() {
  const location = useLocation()

  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={location.pathname}
        initial={{ opacity: 0, x: 20 }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: -20 }}
      >
        <Routes location={location}>
          {/* vos routes ici */}
        </Routes>
      </motion.div>
    </AnimatePresence>
  )
}

Exercice : Créez un Mini-Portfolio !

Créez un portfolio avec :

1. Une page d'accueil présentant vos projets
2. Une section "Projets" avec des sous-routes pour chaque projet
3. Une navigation élégante avec des animations
4. Un formulaire de contact qui redirige vers une page de remerciement après envoi

Bonus : Ajoutez une barre de progression en haut de la page qui indique où vous êtes dans la navigation !

Astuce Pro 🎯

• Utilisez useLocation pour des effets basés sur la route actuelle
• Le prop replace de navigate est super utile pour les formulaires
• NavLink peut recevoir une fonction comme className ou style
• Outlet peut recevoir un context pour passer des données aux routes enfants

Pour le cours Prochain...

On va plonger dans les paramètres d'URL et les routes dynamiques. Vous allez voir, c'est comme donner des super-pouvoirs à vos routes ! 🦸‍♂️