Différence entre react-router et react-router-dom

Ces deux bibliothèques sont souvent confondues, mais elles ont des rôles distincts :

• react-router : contient la logique fondamentale du routtage
• react-router-dom : enrichit react-router avec des fonctionnalités spécifiques au navigateur, comme le composant Link qui génère une balise <a>, ainsi que les composants BrowserRouter et HashRouter

La seconde dépendance intègre automatiquement la première. Lors de l'installation via npm, il suffit donc d'installer react-router-dom pour un projet destinées au navigateur.

Installation du package

npm i -S react-router-dom

Configuration initiale

Dans le fichier d'entrée principal (index.js), il faut envelopper le composant racine avec le routeur. Cette opération peut aussi être réalisée dans App.js, du moment que le composant supérieur est包裹 le point d'entrée de l'application.

Deux modes de routage sont disponibles : HashRouter utilise le hash de l'URL tandis que BrowserRouter s'appuie sur l'API History du navigateur.

import { BrowserRouter } from "react-router-dom";
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

Navigation statique des routes

Configuration dans le composant principal

Les imports nécessaires proviennent de react-router-dom :

import { Switch, Route, Link, Redirect } from "react-router-dom";

Rôle de chaque composant :

• Link : permet la navigation entre pages (attribut to)
• Route :占位符 pour l'affichage des composants (attributs path et component)
• Switch :避免 les renderisations multiples de routes
• Redirect : effectue une redirection automatique (attribut from)

import React from "react";
import { Switch, Route, Link, Redirect } from "react-router-dom";
import Home from "./components/Home.jsx";
import Profile from "./components/Profile.jsx";

export default function App() {
  return (
    <div>
      <nav>
        <Link to="/accueil">Accueil</Link> &nbsp;
        <Link to="/profil">Mon Profil</Link>
      </nav>
      <Switch>
        <Redirect from="/" to="/accueil" exact/>
        <Route exact path="/accueil" component={Home}></Route>
        <Route exact path="/profil" component={Profile}></Route>
      </Switch>
    </div>
  );
}

Méthodes de navigation dans un composant

Deux approches existent :

• Approche déclarative : utilisation du composant Link
• Approche programmatique : utilisation de this.props.history.push()

import React from "react";
import { Link } from "react-router-dom";

export default class Home extends React.Component {
  render() {
    return (
      <div>
        <Link to="/profil">Aller au profil (déclaratif)</Link>
        <button onClick={() => {this.naviguerVersProfil()}}>
          Navigation programmatique
        </button>
      </div>
    );
  }
  
  naviguerVersProfil = () => {
    this.props.history.push('/profil');
  }
}

Passage de paramètres entre routes

Méthode 1 : Routing dynamique (params)

Les paramètres sont intégrés dans l'URL sous forme de segments (ex: /utilisateur/5). L'avantage est la persistance lors du rafraichissement, mais l'URL devient moins élégante avec beaucoup de paramètres.

// Définition de la route avec paramètre dynamique
<Switch>
  <Route exact path="/utilisateur/:id" component={Utilisateur}></Route>
</Switch>

// Navigation déclarative
<Link to="/utilisateur/5">Aller vers utilisateur 5</Link>

// Navigation programmatique
this.props.history.push('/utilisateur/' + 2);

// Récupération des paramètres dans le composant cible
export default class Utilisateur extends React.Component {
  componentDidMount() {
    console.log(this.props.match.params, 'paramètres récupérés')
  }
}

Méthode 2 : Query ou State

Les paramètres sont transmis sous forme d'objet et n'apparaissent pas dans l'URL. L'attribut pathname est obligatoire.

// Définition de la route
<Switch>
  <Route exact path="/utilisateur" component={Utilisateur}></Route>
</Switch>

// Navigation déclarative avec query
<Link to={{ pathname: "/utilisateur", query: { id: 1 } }}>
  Vers utilisateur (query)
</Link>

// Navigation programmatique
this.props.history.push({
  pathname: "/utilisateur",
  query: {
    id: 100,
    identifiant: 10010,
  },
});

// Récupération des paramètres
export default class Utilisateur extends React.Component {
  componentDidMount() {
    console.log(this.props.location.query, "paramètres de route");
  }
}

Écoute des changements de route

La méthode props.history.listen() permet d'exécuter du code à chaque changement de route. Elle reçoit une fonction de rappel qui s'active lors de la navigation entre pages.

this.props.history.listen((route) => {
  console.log(route, 'changement de route détecté');
});

Cette fonctionnalité s'avère utile pour tracking analytics ou mise à jour de données selon la route active.