react-router fournit des composants de routage de base tels que Route et Switch, qui permettent de définir des routes et de rendre des composants en fonction de l'URL. Cependant, il n'inclut pas de composants spécifiques au navigateur, ce qui le rend plus léger mais moins fonctionnel pour les applications web.

react-router-dom étend react-router en ajoutant des composants spécifiques au navigateur comme BrowserRouter, Link et NavLink, qui facilitent la création de liens et la gestion de l'historique de navigation. Cela le rend plus complet et adapté aux applications web.

react-router gère l'historique de navigation de manière abstraite, ce qui signifie qu'il peut fonctionner avec différents types d'historique (par exemple, navigateur, hash, mémoire) sans dépendre d'une API spécifique. Cela le rend flexible et adaptable à différents environnements.

react-router-dom utilise l'API d'historique du navigateur pour gérer la navigation dans les applications web. Il fournit des composants comme Link et NavLink qui s'appuient sur l'historique du navigateur pour créer des transitions fluides entre les pages.

react-router est conçu pour les applications à page unique (SPA) et permet un rendu dynamique des composants en fonction de l'URL. Il prend en charge le routage imbriqué, les routes dynamiques et les redirections, ce qui le rend puissant pour les applications modernes.

react-router-dom prend également en charge les applications à page unique (SPA) tout en ajoutant des fonctionnalités spécifiques au navigateur. Il permet un routage imbriqué, la gestion des redirections et des routes dynamiques, tout en offrant des composants supplémentaires qui améliorent l'expérience de navigation.

react-router fournit une base solide pour créer des applications accessibles, mais il appartient aux développeurs de s'assurer que les composants rendus sont accessibles. La bibliothèque elle-même ne fournit pas de fonctionnalités spécifiques pour la navigation au clavier ou l'accessibilité.

react-router-dom améliore l'accessibilité des applications web en fournissant des composants comme Link et NavLink, qui sont conçus pour être accessibles par défaut. La bibliothèque encourage les bonnes pratiques d'accessibilité, mais les développeurs doivent toujours veiller à rendre leurs composants personnalisés accessibles.

Exemple de routage de base avec react-router

import { BrowserRouter as Router, Route, Switch } from 'react-router';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact>
          <h1>Page d'accueil</h1>
        </Route>
        <Route path="/about">
          <h1>À propos</h1>
        </Route>
      </Switch>
    </Router>
  );
}

Exemple de routage avec react-router-dom

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

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Accueil</Link>
        <Link to="/about">À propos</Link>
      </nav>
      <Switch>
        <Route path="/" exact>
          <h1>Page d'accueil</h1>
        </Route>
        <Route path="/about">
          <h1>À propos</h1>
        </Route>
      </Switch>
    </Router>
  );
}