React est une bibliothèque JavaScript qui permet de créer des interfaces utilisateur. Nous pouvons également l'utiliser pour créer des applications multipages à l'aide de React Router. Il s'agit d'une bibliothèque tierce qui permet le routage dans nos applications React.

Dans ce tutoriel, nous allons couvrir tout ce que vous devez savoir pour commencer à utiliser React Router.

Sorry for the interrupt!

If you're interested in learning React in a comprehensive way, I highly recommend this bestseller course: React - The Complete Guide (incl Hooks, React Router, Redux)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Mise en place du projet
Qu'est-ce que le routage?
Configuration d'un routeur
Créer une route
Ajouter des liens
Passage des paramètres entre les routes
Navigation programmée
Redirection vers une autre page
Redirection vers la page 404
Garder une route
Les Hooks du Routeur (useHistory, useParams, useLocation)
Dernières pensées
Prochaines étapes

Mise en place du projet

Pour pouvoir suivre, vous devrez créer une nouvelle application React avec cette commande suivante:

npx create-react-app react-router-guide

Et ajoutez ces lignes de code au fichier App.js.

Dans App.js

import React from "react"
import "./index.css"

export default function App() {
  return (
    <main>
      <nav>
        <ul>
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/about">About</a>
          </li>
          <li>
            <a href="/contact">Contact</a>
          </li>
        </ul>
      </nav>
    </main>
  )
}
// Home Page
const Home = () => (
  <Fragment>
    <h1>Home</h1>
    <FakeText />
  </Fragment>
)
// About Page
const About = () => (
  <Fragment>
    <h1>About</h1>
    <FakeText />
  </Fragment>
)
// Contact Page
const Contact = () => (
  <Fragment>
    <h1>Contact</h1>
    <FakeText />
  </Fragment>
)

const FakeText = () => (
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
)

Ensuite, si vous êtes prêt, commençons par répondre à une question importante: qu'est-ce que le routage?

Qu'est-ce que le routage?

Le routage est la capacité d'afficher différentes pages à l'utilisateur. Cela signifie qu'il donne la possibilité de naviguer entre les différentes parties d'une application en entrant une URL ou en cliquant sur un élément.

Et comme vous le savez déjà, par défaut, React vient sans routage. Et pour l'activer, nous devons ajouter une bibliothèque nommée react-router.

Pour l'installer, vous devrez exécuter la commande suivante dans votre terminal:

yarn add react-router-dom

npm install react-router-dom

Maintenant que nous avons installé notre routeur avec succès, commençons à l'utiliser dans la section suivante.

Configuration d'un routeur

Le paquet React Router a un composant pratique appelé BrowserRouter. Nous devons d'abord l'importer depuis react-router-dom afin de pouvoir utiliser le routage dans notre application.

Dans App.js

import React, { Fragment } from "react"
import "./index.css"

import { BrowserRouter as Router } from "react-router-dom"
export default function App() {
  return (
    <Router>      <main>        <nav>          <ul>            <li>              <a href="/">Home</a>            </li>            <li>              <a href="/about">About</a>            </li>            <li>              <a href="/contact">Contact</a>
            </li>
          </ul>
        </nav>
      </main>
    </Router>
  )
}

Il doit contenir tout les éléments de notre application où le routage est nécessaire. Cela signifie que si nous avons besoin du routage dans l'ensemble de notre application, nous devons envelopper notre composant le plus haut avec BrowserRouter.

En passant, vous n'avez pas besoin de renommer BrowserRouter as Router comme je l'ai fais ici, je veux juste que les choses soient lisibles.

Un routeur seulement, ne fait pas grand-chose, il est temps d'ajouter une route dans la section suivante.

Créer une route

Pour créer un itinéraire, nous devons importer Route à partir du package du routeur.

In App.js

import React, { Fragment } from "react"
import "./index.css"

import { BrowserRouter as Router, Route } from "react-router-dom"
export default function App() {
  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="/about">About</a>
            </li>            <li>
              <a href="/contact">Contact</a>
            </li>
          </ul>
        </nav>
        <Route path="/" render={() => <h1>Welcome!</h1>} />
      </main>
    </Router>
  )
}

Ajoutez-le ensuite là où nous voulons afficher le contenu. Le composant Route a plusieurs propriétés. Mais ici, nous avons juste besoin de path et de render.

path: c'est le chemin à charger lorsque l'itinéraire est atteint. Ici, nous utilisons / pour accéder à la page d'accueil.
render: il restituera le contenu de la route. Ici, nous allons afficher un message de bienvenue à l'utilisateur.

Dans certains cas, desservir des itinéraires comme celui-ci est tout à fait correct, mais imaginez lorsque nous devons traiter un composant réel. Utiliser render ne serait pas une bonne solution.

Alors, comment pouvons-nous faire pour afficher quelque chose sans les accessoires de render ? Eh bien, le composant Route a une autre propriété nommée component.

Nous devons mettre à jour notre exemple pour le voir en action.

Dans App.js

import React, { Fragment } from "react"
import "./index.css"

import { BrowserRouter as Router, Route } from "react-router-dom"

export default function App() {
  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="/about">About</a>
            </li>
            <li>              <a href="/contact">Contact</a>
            </li>
          </ul>
        </nav>

        <Route path="/" component={Home} />
      </main>
    </Router>
  )
}

const Home = () => (
  <Fragment>
    <h1>Home</h1>
    <FakeText />
  </Fragment>
)

Maintenant, au lieu d'afficher un message, notre route chargera le composant Home.

Pour obtenir toute la puissance de React Router, nous devons avoir plusieurs pages et liens avec lesquels jouer. Nous avons déjà des pages, ajoutons maintenant quelques liens pour pouvoir aller sur d'autres pages.

Ajouter des liens

Pour ajouter des liens à notre projet, nous allons utiliser à nouveau la bibliothèque React Router pour le faire.

Dans App.js

import React, { Fragment } from "react"
import "./index.css"

import { BrowserRouter as Router, Route, Link } from "react-router-dom"
export default function App() {
  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>              <Link to="/">Home</Link>            </li>            <li>              <Link to="/about">About</Link>            </li>            <li>              <Link to="/contact">Contact</Link>            </li>          </ul>        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </main>
    </Router>
  )
}

const Home = () => (
  <Fragment>
    <h1>Home</h1>
    <FakeText />
  </Fragment>
)

const About = () => (
  <Fragment>
    <h1>About</h1>
    <FakeText />
  </Fragment>
)

const Contact = () => (
  <Fragment>
    <h1>Contact</h1>
    <FakeText />
  </Fragment>
)

Après avoir importé Link, nous devons mettre à jour notre barre de navigation. Au lieu d'utiliser a ethref, React Router utilise Link et to pour pouvoir basculer entre les pages sans recharger la page.

Ensuite, nous devons ajouter deux nouveaux itinéraires About et Contact pour pouvoir basculer entre les pages.

Maintenant, nous pouvons accéder à différentes parties de notre application via des liens. Mais il y a un problème avec notre router, le composant Home est toujours affiché même si nous passons à d'autres pages.

La raison est que le React Router vérifie si le path défini commence par / si c'est le cas, il rendra le composant. Et ici, notre premier itinéraire commence par / donc Home sera affiché.

Mais nous pouvons toujours changer le comportement par défaut en ajoutant un nouveau accessoire à Route: la propriété exact.

Dans App.js

<Route path="/" exact component={Home} />

En mettant à jour l'itinéraire Home avecexact, maintenant, il ne sera rendu que s'il correspond au chemin complet.

Nous pouvons encore l'améliorer, en enveloppant nos routes avec Switch pour dire à React Router de ne charger qu'une seule route à la fois.

Dans App.js

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"
;<Switch>
  <Route path="/" exact component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Switch>

Maintenant que nous avons de nouveaux liens, il est temps de passer des paramètres entre les pages.

Passage des paramètres entre les routes

Pour transmettre des données entre les pages, nous devons mettre à jour notre exemple.

Dans App.js

import React, { Fragment } from "react"
import "./index.css"

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

export default function App() {
  const name = "John Doe"  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>            </li>            <li>              <Link to={`/about/${name}`}>About</Link>            </li>            <li>              <Link to="/contact">Contact</Link>            </li>          </ul>        </nav>        <Switch>          <Route path="/" exact component={Home} />          <Route path="/about/:name" component={About} />          <Route path="/contact" component={Contact} />        </Switch>      </main>    </Router>  )}const Home = () => (  <Fragment>    <h1>Home</h1>    <FakeText />  </Fragment>)
const About = ({
  match: {
    params: { name },
  },
}) => (
  // props.match.params.name
  <Fragment>
    <h1>About {name}</h1>
    <FakeText />
  </Fragment>
)

const Contact = () => (
  <Fragment>
    <h1>Contact</h1>
    <FakeText />
  </Fragment>
)

Ici, nous commençons par déclarer une nouvelle constante name qui sera passée en paramètre à la page About. Et, nous ajoutons name au lien About.

Avec cela, nous devons mettre à jour la route About, en ajustant son chemin pour pouvoir recevoir le nom en tant que paramètre path="/about/:name".

Maintenant, le paramètre sera reçu sous forme d'accessoires dans le composant About et la seule chose que nous devons faire maintenant est de déstructurer les accessoires et de récupérer la propriété name. En passant, {match: {params: {name}}} est la même chose que props.match.params.name.

Jusqu'à présent, nous avons fait beaucoup de choses, cependant, dans certains cas, nous n'allons pas utiliser les liens pour naviguer entre les pages.

Parfois, nous devons attendre la fin d'une opération avant de passer à la page suivante.

Il est temps de gérer ce cas d'utilisation.

Les accessoires que nous recevons ont quelques méthodes pratiques que nous pouvons utiliser pour naviguer entre les pages.

Dans App.js

const Contact = ({ history }) => (
  <Fragment>
    <h1>Contact</h1>
    <button onClick={() => history.push("/")}>Go to home</button>
    <FakeText />
  </Fragment>
)

Ici, nous tirons l'objet history des accessoires que nous recevons. Il a quelques méthodes pratiques comme goBack, goForward, etc. Mais ici, nous allons utiliser la méthode push pour pouvoir aller à la page d'accueil.

Maintenant, traitons le cas où nous voulons rediriger notre utilisateur après une action.

Redirection vers une autre page

Le React Router a un autre composant nommé Redirect. Et comme vous l'avez deviné, cela nous aide à rediriger l'utilisateur vers une autre page

Dans App.js

import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect,
} from "react-router-dom"

const About = ({
  match: {
    params: { name },
  },
}) => (
  // props.match.params.name
  <Fragment>
    {name !== "John Doe" ? <Redirect to="/" /> : null}
    <h1>About {name}</h1>
    <FakeText />
  </Fragment>
)

Maintenant, si le name passé en paramètre n'est pas égal à John Doe, l'utilisateur sera redirigé vers la page d'accueil.

Vous pourriez demander pourquoi je n'ai pas redirigé l'utilisateur avec props.history.push ('/) ? Eh bien, le composant Redirect remplace la page et donc l'utilisateur ne peut pas revenir à la page précédente, mais, avec la méthode push, il peut le faire. Cependant, vous pouvez utiliser props.history.replace ('/) pour imiter le comportement de Redirect.

Maintenant, passons à autre chose et traitons le cas où l'utilisateur atteint une route qui n'existe pas.

Redirection vers la page 404

Pour rediriger l'utilisateur, vers une page 404, vous pouvez créer un composant pour afficher la page, mais ici pour faire simple, je vais juste afficher un message avec render.

import React, { Fragment } from "react"
import "./index.css"

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

export default function App() {
  const name = "John Doe"

  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to={`/about/${name}`}>About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>        </nav>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about/:name" component={About} />
          <Route path="/contact" component={Contact} />
          <Route render={() => <h1>404: page not found</h1>} />
        </Switch>
      </main>
    </Router>
  )
}

Le nouvel itinéraire sans path interceptera tous les routes qui n'existent pas et redirigera l'utilisateur vers la page 404.

Maintenant, passons à autre chose et apprenons comment protéger nos itinéraires dans la section suivante.

Garder une route

Il existe de nombreuses façons de protéger les itinéraires dans React. Mais, ici, je vais juste vérifier si l'utilisateur est authentifié et le rediriger vers la page appropriée.

import React, { Fragment } from "react"
import "./index.css"

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

export default function App() {
  const name = "John Doe"
  const isAuthenticated = false  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to={`/about/${name}`}>About</Link>
            </li>
            <li>              <Link to="/contact">Contact</Link>            </li>          </ul>        </nav>        <Switch>          <Route path="/" exact component={Home} />          {isAuthenticated ? (            <>
              <Route path="/about/:name" component={About} />
              <Route path="/contact" component={Contact} />
            </>
          ) : (
            <Redirect to="/" />
          )}
        </Switch>
      </main>
    </Router>
  )
}

Comme vous pouvez le voir ici, j'ai déclaré une variable pour imiter l'authentification. Ensuite, on vérifie si l'utilisateur est authentifié ou non, si c'est le cas, les pages protégées seront visibles, sinon l'utilisateur sera rediriger vers la page d'accueil.

Nous avons couvert beaucoup de choses jusqu'à présent, il est temps de passer à la dernière section et d'introduire les Hooks du routeur.

Les Hooks du Routeur (useHistory, useParams, useLocation)

Les Hooks du routeur facilitent les choses. Désormais, l'accès à l'historique, à l'emplacement ou aux paramètres se fait de manière simple et élégante.

useHistory

Le hook useHistory nous donne accès à l'instance d'historique sans la retirer des accessoires reçus.

import { useHistory } from "react-router-dom"
const Contact = () => {
  const { history } = useHistory()  return (
    <Fragment>
      <h1>Contact</h1>
      <button onClick={() => history.push("/")}>Go to home</button>
    </Fragment>
  )
}

useParams

Il nous aide à accéder au paramètre passé dans l'URL sans utiliser l'objet props.

import {  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  useParams,
} from "react-router-dom"

export default function App() {
  const name = "John Doe"
  return (
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to={`/about/${name}`}>About</Link>
            </li>
          </ul>
        </nav>
        <Switch>          <Route path="/" exact component={Home} />
          <Route path="/about/:name" component={About} />
        </Switch>
      </main>
    </Router>
  )
}

const About = () => {
  const { name } = useParams()
  return (
    // props.match.params.name
    <Fragment>
      {name !== "John Doe" ? <Redirect to="/" /> : null}
      <h1>About {name}</h1>
      <Route component={Contact} />
    </Fragment>
  )
}

useLocation

Il renvoie l'objet de localisation qui représente l'URL actuelle.

import { useLocation } from "react-router-dom"
const Contact = () => {
  const { pathname } = useLocation()
  return (
    <Fragment>
      <h1>Contact</h1>
      <p>Current URL: {pathname}</p>
    </Fragment>
  )
}

Dernières pensées

Le React Router est une bibliothèque intéressante qui nous aide à passer d'une seule page à une sensation d'application multi-pages (en fin de compte, c'est toujours une seule page) avec une grande facilité d'utilisation. Et maintenant, avec les hooks du routeur, vous avez vu par vous-même à quel point ils sont faciles et élégants, certainement quelque chose à considérer dans votre prochain projet.

Prochaines étapes

Documentation de React Router

Photo prise par Joshua Sortino sur Unsplash

#react#hooks

Support my work

Buy me a coffee

Get articles in your inbox

Le guide complet du débutant avec le routeur de React

Subscribe to receive the free weekly article