Aide-Mémoire React Router

Posted on:6 novembre 2023 at 11:18

React Router permet de gérer la navigation dans les applications React. Cet article sert de mémo pour les éléments essentiels à connaître pour commencer à l’utiliser.

Une table avec un livre et une tasse de café et un laptop.

Sommaire

Comment mettre en place React Router ?

npm install react-router-dom
import { BrowserRouter } from "react-router-dom";

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

Comment créer des routes simples avec <Routes> et <Route> ?

Définir le chemin de l’URL avec path et le composant à afficher avec element.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/livres" element={<Liste />} />
  <Route path="/livres/new" element={<NewBook />} />
</Routes>

Comment créer un composant 404 ?

Créer un composant qui sera affiché si aucune route ne correspond à l’URL. Utiliser le chemin *.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/livres" element={<Liste />} />
  <Route path="/livres/new" element={<NewBook />} />
  <Route path="*" element={<NotFound />} />
</Routes>

Comment créer des routes dynamiques et récupérer les paramètres ?

Pour créer des routes dynamiques et récupérer les paramètres, utiliser le format /:param. On peut rendre le paramètre optionnel en ajoutant ? à la fin du chemin. Exemple :

<Route path="/livres/:id" element={<Book />} />

//<Route path="/livres/:id?" element={<Book />} /> pour rendre le paramettre optionnel

Récupérer les paramètres dans le composant cible en utilisant useParams.

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

function Book() {
  const params = useParams();
  return <h1>Book n°{params.id}</h1>;
}

Comment passer des données via l’URL avec les search params ?

import { useSearchParams } from "react-router-dom";

function Book() {
  const [searchParams, setSearchParams] = useSearchParams();
  return (
    <div>
      <h1>Book n°{searchParams.get("id")}</h1>
      <button onClick={() => setSearchParams({ id: 1 })}>Book 1</button>
      <button onClick={() => setSearchParams({ id: 2 })}>Book 2</button>
    </div>
  );
}

La page peut également etre appellée avec l'URL suivante : /livres?id=1

Comment utiliser des routes imbriquées ?

Utiliser des routes imbriquées pour organiser ces routes. La route index sera affichée par défaut si on accédes à la route parente. Voici un exemple :

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/livres">
    <Route index element={<Liste />} />
    <Route path=":id" element={<Book />} />
    <Route path="new" element={<NewBook />} />
  </Route>
</Routes>

Comment mettre en place un composant de layout ?

Créer un composant de layout pour afficher des éléments communs à toutes les routes imbriquées. Utiliser le composant <Outlet> pour afficher les routes imbriquées. Exemple :

import { Outlet } from "react-router-dom";

function Layout() {
  return (
    <div>
      <h1>Mon super site de livres</h1>
      <Outlet />
    </div>
  );
}

Utiliser ce layout dans l’application comme suit :

<Routes>
  <Route path="/livres" element={<Layout />}>
    <Route index element={<Liste />} />
    <Route path=":id" element={<Book />} />
    <Route path="new" element={<NewBook />} />
  </Route>
</Routes>

Transformer l’application en une Single Page Application (SPA) en utilisant le composant <Link> au lieu de <a> pour la navigation. Voici comment faire :

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

<Link to="/">Accueil</Link>
<Link to="/livres">Liste</Link>
<Link to="../">Retour</Link>

Personnaliser le comportement des liens avec les propriétés replace, reloadDocument, et state de <Link>. Exemples :

<Link to="/livres" replace>
  Liste
</Link>

Comment récupérer des données passées avec state ?

Utiliser useLocation pour récupérer les données passées avec state dans le composant cible.

import { useLocation } from "react-router-dom";

function Livres() {
  const location = useLocation();
  console.log(location.state);
  return <h1>Liste des livres</h1>;
}

Utiliser le composant <NavLink> pour ajouter des classes CSS à l’élément actif. Exemple :

import { NavLink } from "react-router-dom";

<NavLink to="/livres" activeClassName="active">
  Liste
</NavLink>;

Comment rediriger un utilisateur avec <Redirect> ?

Pour rediriger un utilisateur, utiliser <Redirect>. Exemple :

import { Navigate } from "react-router-dom";

function NotFound() {
  return <Navigate to="/" />;
}

Comment rediriger un utilisateur avec le hook useNavigate ?

Utiliser le hook useNavigate pour rediriger un utilisateur de manière programmatique. Exemples :

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

function NotFound() {
  const navigate = useNavigate();

  useEffect(() => {
    navigate("/");
  }, [navigate]);

  return null;
}