1. Introduction au routeur React

React Router est une bibliothèque permettant de gérer le routage dans les applications React. Il permet à votre application de naviguer entre différents composants et vues sans recharger une page entière, ce qui rend l'expérience utilisateur transparente.

2. Configuration de base

Commencez par installer React-Router-dom :

npm install react-router-dom

Configurer le routage de base à l'aide de BrowserRouter, Routes et Route :

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Home = () => 
Home
;
const About = () => 
About
;

const App = () => {
  return (
    
      

      
        } />
        } />
      
    
  );
};

export default App;

3. Routage imbriqué

Pour les applications plus complexes, vous pouvez imbriquer des itinéraires. Voici comment configurer des routes imbriquées dans un composant parent :

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Dashboard = () => 
Dashboard Home
;
const Profile = () => 
Your Profile
;

const DashboardLayout = () => {
  return (
    

      
      
        } />
        } />
      
    
  );
};

const App = () => {
  return (
    
      
        } />
      
    
  );
};

export default App;

4. Routage dynamique

Le routage dynamique vous permet de transmettre des paramètres dans l'URL. Voici comment définir et accéder à un itinéraire dynamique :

import { useParams } from 'react-router-dom';

const User = () => {
  const { id } = useParams();
  return 
User ID: {id}
;
};

const App = () => {
  return (
    
      

      
        } />
      
    
  );
};

export default App;

5. Itinéraires protégés

Pour implémenter des routes protégées, vous pouvez créer un composant PrivateRoute personnalisé :

import { Navigate, Outlet } from 'react-router-dom';

const useAuth = () => {
  const user = { loggedIn: true }; // Replace with actual auth logic
  return user && user.loggedIn;
};

const PrivateRoute = () => {
  const isAuth = useAuth();
  return isAuth ?  : ;
};

const App = () => {
  return (
    
      
        } />
        }>
          } />
        
      
    
  );
};

export default App;

6. Navigation programmatique

Parfois, vous souhaiterez peut-être naviguer par programmation, comme après la soumission d'un formulaire. Utilisez le hook useNavigate dans React Router v6 :

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

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

  const handleLogin = () => {
    // Login logic here...
    navigate('/dashboard');
  };

  return (
    

      
Login
      Login
    
  );
};

export default Login;

7. 404 pages

Gérez les erreurs 404 (introuvable) en créant une route fourre-tout :

const NotFound = () => 
404 - Page Not Found
;

const App = () => {
  return (
    
      
        } />
        } />
        } />
      
    
  );
};

export default App;

8. Considérations relatives aux performances

Pour les applications volumineuses, les itinéraires de chargement paresseux peuvent améliorer les performances. Voici comment implémenter le chargement différé avec React.lazy() et Suspense :

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

const App = () => {
  return (
    
      Loading...}>
        
          } />
          } />
        
      
    
  );
};

export default App;