Le Routing en React - Cours n°1

Les Fondamentaux

"Mais pourquoi on a besoin de routing ?"

Imaginez que vous créez Netflix en React. Sans routing, vous auriez une seule longue page avec TOUS les films les uns à la suite des autres... Pas très pratique ! Le routing permet de créer différentes "pages" dans votre application. Comme ça, vous pouvez avoir :

• Une page d'accueil (/)
• Une page pour chaque film (/movie/titanic)
• Une page profil (/profile) Et tout ça sans recharger la page ! C'est ça la magie des Single Page Applications (SPA).

Installation de notre GPS React

Première étape, on installe react-router-dom :

npm install react-router-dom

Configuration de Base

Maintenant, on va configurer notre application. C'est comme si on installait le GPS dans notre voiture !

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    {/* BrowserRouter est notre GPS principal */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

Création de nos Premières Routes

Maintenant, créons quelques pages simples :

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

// src/pages/About.jsx
export default function About() {
  return <h1>À propos de nous ! 👋</h1>
}

// src/pages/NotFound.jsx
export default function NotFound() {
  return <h1>Oups ! Page non trouvée 😅</h1>
}

Et maintenant, le moment que vous attendiez tous... La configuration des routes !

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

function App() {
  return (
    <>
      {/* Routes est comme un aiguilleur de train */}
      <Routes>
        {/* Chaque Route est une destination possible */}
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* La route * attrape toutes les URLs qui ne correspondent à rien */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </>
  )
}

export default App

Jour 3 : Navigation Entre les Pages

Maintenant qu'on a nos routes, il nous faut des moyens de naviguer ! On va créer une barre de navigation stylée :

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

export default function Navbar() {
  return (
    <nav style={{ padding: '1rem', backgroundColor: '#f0f0f0' }}>
      {/* Link est comme un <a> mais sans rechargement de page */}
      <Link to="/" style={{ marginRight: '1rem' }}>
        Accueil
      </Link>

      {/* NavLink est comme Link mais avec des super-pouvoirs !
          Il sait quand il est actif */}
      <NavLink
        to="/about"
        style={({ isActive }) => ({
          color: isActive ? 'red' : 'black'
        })}
      >
        À propos
      </NavLink>
    </nav>
  )
}

Ajoutons notre Navbar à l'App :

// src/App.jsx
import Navbar from './components/Navbar'

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        {/* ... nos routes ... */}
      </Routes>
    </>
  )
}

Le Saviez-Vous ? 🤔

• Link est comme un téléporteur : il vous emmène directement à destination sans recharger la page
• NavLink est comme un téléporteur avec GPS intégré : il sait où vous êtes et peut changer de style en fonction
• Routes est comme un agent de circulation : il regarde l'URL et vous dirige vers la bonne page
• L'ordre des routes est important ! Les routes plus spécifiques doivent venir avant les routes plus générales

Exercice pratique pour finir en beauté :

Créez une petite application avec :

1. Une page d'accueil
2. Une page "Notre équipe"
3. Une page "Contact"
4. Une jolie barre de navigation
5. Une page 404 personnalisée

Bonus : Ajoutez des animations de transition entre les pages (on verra ça plus tard en détail, mais vous pouvez déjà chercher sur Google "React Router transitions") !

Pour la prochaine fois...

On va voir comment créer des routes dynamiques pour afficher différent contenu selon l'URL (comme /user/123 ou /product/xbox). Préparez-vous à devenir de vrais ninjas du routing ! 🥷