Accueil

> Cours
> Créez une application React complète
> Transformez votre application en Single Page
Application avec React Router

Créez une application React complète

12 heures Moyenne

Mis à jour le 24/11/2021

 

Transformez votre application en Single Page

Application avec React Router

00:59

Comprenez le principe de SPA



Prenons notre machine à voyager dans le temps et retournons aux débuts du Web. 🤖

À cette époque, l'immense majorité des sites consistaient en un groupe de pages, envoyées par le
serveur, qui s'affichaient en fonction de la navigation. Pour chaque interaction, telle que l'envoi
d'un formulaire, la page entière devait être rechargée.

Mais au début des années 2000, le concept de Single Page Application (SPA) commence à
émerger. Les idées principales derrière ce concept sont les suivantes :

Les utilisateurs ne chargent une page web qu'une seule fois (le fameux index.html ).

Au lieu de récupérer toute la page avec un call API, on les récupère de manière distincte,
petite partie par petite partie, ce qui permet à l'utilisateur d'interagir de manière beaucoup
plus dynamique.
L'utilisateur peut naviguer entre plusieurs pages, et JavaScript (et dans notre cas, React)
gère l'affichage de nouvelles pages au sein du même domaine, sans qu'un rafraîchissement
complet de la page soit nécessaire.
 L’affichage du site web classique en haut est moins dynamique que celui
de la SPA en bas.

Mais… Est-ce que ça veut dire que les SPA sont nécessairement mieux ? Et donc que tous
les nouveaux sites sont codés pour être des SPA ???

Eh bien, non. Toutes les applications ne sont pas nécessairement des SPA. Lorsque vous codez
votre site en Single Page Application, il faut être conscient de certains inconvénients :
notamment que vos utilisateurs doivent impérativement avoir JavaScript pour que votre site
fonctionne, ou bien au niveau du Search Engine Optimisation (SEO, l'optimisation de l'indexation
de votre site par les moteurs de recherche), qui est plus laborieux pour les Single Page
Applications.

Je vous ai déjà parlé de Gatsby ou bien Next.js. Il s'agit de frameworks basés sur React qui
permettent de générer notre application côté serveur, et donc de faire du Server Side
Rendering (SSR). C’est-à-dire qu’ils génèrent le HTML depuis React côté serveur, et puis
l'envoient avec chaque page déjà générée au client. Pour ce qui est de leur routing, ils
mettent leur propre solution à disposition. Elle se comporte comme du routing de SPA au
niveau de l'expérience utilisateur, mais qui est un peu plus complexe qu'il n'y paraît. 

Les projets que nous créons avec Create React App ne peuvent pas encore être considérés
comme des Single Page Applications : il leur manque une solution de routing.

Découvrez React Router


Contrairement aux frameworks comme Angular, React ne nous fournit pas directement une
solution pour gérer les routes de notre application. Pas de panique, comme pour quasiment tout
en React, l'écosystème a vite comblé ce besoin. Il existe donc plusieurs solutions de routing. Celle
à laquelle nous allons nous intéresser dans ce cours est React Router (le nom est plutôt bien
trouvé, n'est-ce pas ? 🙃).

 Du routing ? Très bien, mais concrètement, ça veut dire quoi une route ?

Comme nous pouvons le voir dans la documentation React Router, une route permet d'afficher
des composants de manière conditionnelle, si le path (chemin) de l'URL correspond au path de la
route.

On lui passe en prop le path auquel la route correspond, et elle se charge d'afficher les children
qui lui sont passés.

Cette bibliothèque, créée par React Training, met à votre disposition tous les outils nécessaires
pour gérer la navigation dans votre application côté client.
Alors partons à la découverte de React Router. 🚀

Créez votre premier fichier de routing


Nous allons commencer par installer la bibliothèque avec   yarn add react-router-dom    . Si
vous voulez en apprendre davantage sur la configuration, n'hésitez pas à jeter un œil à la
documentation de React Router.

React Router est maintenant prêt à être utilisé ! 🎉

React Router est très régulièrement mis à jour. La version utilisée pour faire ce cours est la
V5. Au moment où le cours a été rédigé, la V6 était en version alpha. Le choix a donc été
fait de rester sur la V5. N'hésitez pas à consulter le blog de React Router pour en
apprendre davantage sur les différentes versions et leurs actualités. Pour suivre ce cours,
vous pourrez préciser la version que vous souhaitez installer en la mettant directement
dans le   package.json   .

Actuellement, nous n'avons qu'une seule fonctionnalité avec   Home   . Créons dès maintenant un
nouveau composant pour le questionnaire.

Pour cela, on crée un fichier   Survey.jsx   dans   pages   . Pour le moment, gardons un
composant très simple :
javascript

1 function Survey() {

2 return (

3 <div>

4 <h1>Questionnaire 🧮</h1>

5 </div>

6 )

7 }

Votre mission, si vous l'acceptez, est de pouvoir naviguer entre la page d'accueil – Home – et le
questionnaire – Survey. 🕵️‍♀️

Vous vous en doutez sûrement : nous allons utiliser React Router et ses composants Router et
Route !

Commençons par le Router. Il doit être placé à la racine de notre arborescence de composants, et
va permettre d'englober toutes les routes que nous allons définir.

On a donc dans le fichier   index.jsx   à la racine de notre projet :

javascript

1 import React from 'react'

2 import ReactDOM from 'react-dom'

3 import { BrowserRouter as Router } from 'react-router-dom'

5 ReactDOM.render(

 6 <React.StrictMode>

7 <Router>

8 <Home />

9 </Router>

10 </React.StrictMode>,

11 document.getElementById('root')

12 )

L'idée est maintenant de mettre dans notre router toutes les routes qui seront accessibles.

Il faudra afficher le bon composant pour cette URL

Créons donc une route pour la page d'accueil, et pour notre questionnaire.
javascript

1 import React from 'react'

2 import ReactDOM from 'react-dom'

3 import { BrowserRouter as Router } from 'react-router-dom'

5 ReactDOM.render(

6 <React.StrictMode>

7 <Router>

8 <Route path="/">

9 <Home />

10 </Route>

11 <Route path="/survey">

12 <Survey />

13 </Route>

14 </Router>

15 <React.StrictMode>

16 )

Yay ! Si vous allez sur l'URL http://localhost:3000/, on a bien la page d'accueil qui s'affiche. Mais,
pour http://localhost:3000/survey… Ohoh ! Les deux s'affichent.. ! Pas de panique, il vous suffit
d'ajouter la prop   exact   dans votre route pour   Home  :
javascript

1 <Route exact path="/">

2 <Home />

3 </Route>

Et voilà ! Ça fonctionne bien comme prévu ! 🚀

 Nos routes renvoient bien les bons composants

Mais bon… Ce n'est pas vraiment pratique de devoir taper toutes nos URL à la main dans la barre
du navigateur pour changer de page. 🙈

Naviguez avec les Link


Profitons-en pour créer notre header, avec les liens vers les différentes pages de notre
application.

Dans notre dossier   /components   , on crée donc un nouveau dossier   /Header   avec un
fichier   index.jsx   à l'intérieur, ce qui nous donne   /components/Header/index.jsx   :
javascript

1 import { Link } from 'react-router-dom'

3 function Header() {

4 return (

5 <nav>

6 <Link to="/">Accueil</Link>

7 <Link to="/survey">Questionnaire</Link>

8 </nav>

9 )

10 }

11

12 export default Header

Ici, j'utilise   Link   , qui nous vient de React Router et se comporte comme une balise  anchor  
. Il est donc très important de l'utiliser lorsque vous souhaitez naviguer pour l'accessibilité de
votre application (et non utiliser des redirections déclenchées par des   onClick   ).

Utilisons maintenant   Header   dans   index.jsx   à la racine de notre projet :

javascript

1 import React from 'react'

2 import ReactDOM from 'react-dom'

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

 4 import Home from './pages/Home'

5 import Survey from './pages/Survey'

6 import Header from './components/Header'

8 ReactDOM.render(

9 <React.StrictMode>

10 <Router>

11 <Header />

12 <Route exact path="/">

13 <Home />

14 </Route>

15 <Route path="/survey">

16 <Survey />

17 </Route>

18 </Router>

19 </React.StrictMode>,

20 document.getElementById('root')

21 )

Ici, j'aurais pu utiliser   Header   dans   Home   et dans   Survey   . Mais, encore mieux, je
le place à la base du router. On considère ici que notre   Header   fait partie du   Layout  
(agencement) de notre application.  ✨

Vous avez maintenant la base de votre application avec navigation : félicitations à vous, vous avez
fait du bon boulot. 🚀

Maintenant que nous avons vu comment mettre en place le routing, j'en profite pour vous
montrer comment découper notre router quand nous avons beaucoup de routes à gérer – dans
un projet de code plus important, par exemple. Alors suivez-moi dans le screencast ci-dessous !

02:16
Récupérez des paramètres dans vos URL


La navigation de notre application fonctionne bien !

Au clic sur les liens, on navigue bien dans l'application

Mais comment faire si vous voulez passer des paramètres ? Par exemple, lorsqu'on va faire
le questionnaire, et que le numéro de chaque question sera récupéré depuis l'URL ? 

Eh bien, bonne question ! Le router vous permet de récupérer des paramètres ; pour cela, il suffit
d'écrire votre route comme ici dans le fichier   index.jsx   à la racine de   /src   :
javascript

1 <Route path="/survey/:questionNumber">

2 <Survey />

3 </Route>

Dans   components/Header/index.jsx   , mettons donc un numéro de question à la suite :

javascript

1 function Header() {

2 return (

3 <nav>

4 <Link to="/">Accueil</Link>

5 <Link to="/survey/42">Questionnaire</Link>

6 </nav>

7 )

8 }

Allons maintenant récupérer ce paramètre dans   survey/index.jsx   à l'aide du hook  

useParams   , mis à disposition par React Router :
javascript

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

3 function Survey() {

4 const { questionNumber } = useParams()

6 return (

7 <div>

8 <h1>Questionnaire 🧮</h1>

9 <h2>Question {questionNumber}</h2>

10 </div>

11 )

12 }

Félicitations à vous ! Vous avez récupéré le numéro de votre question en paramètre. ☀️

Créez une route pour les attraper toutes : 404


Quelle chance, tout fonctionne comme on le souhaite ! Mais qu'est-ce qui se passe si je
commence à taper n'importe quoi dans mon URL ? Par exemple, si j'essaie d'accéder au contenu
de http://localhost:3000/coucouCommentCaVa ?

Notre header s'affiche, mais rien d'autre… Moi, j'aimerais signaler à l'utilisateur que rien n'existe à
cette adresse. Eh bien, ça vous dit quelque chose, les pages d'erreur ? C'est ce que nous allons
faire ici : afficher une page 404.

On commence par créer un simple composant   Error   dans   components/Error/index.jsx   :

javascript

1 function Error() {

2 return (

3 <div>

4 <h1>Oups 🙈 Cette page n'existe pas</h1>

5 </div>

6 )

7 }

9 export default Error

On retourne maintenant dans notre Router. Nous allons avoir besoin du Switch de React Router :
  Switch   nous permet d'afficher uniquement la première route dont le chemin correspond, et
on ajoute une route à laquelle on ne passe pas de prop   path   .

Dans notre router, on a donc :

javascript

1 ReactDOM.render(

2 <React.StrictMode>

3 <Router>

4 <Header />

5 <Switch>

6 <Route exact path="/">

7 <Home />

8 </Route>

9 <Route path="/survey/:questionNumber">

 10 <Survey />

11 </Route>

12 <Route>

13 <Error />

14 </Route>

15 </Switch>

16 </Router>

17 </React.StrictMode>,

18 document.getElementById('root')

19 )

Testons dans notre navigateur :

Notre Route permet d'afficher une erreur lorsque l'URL saisie n'existe pas
dans le Router

Yes ! 💪

Ici, nos besoins en routing restent limités. Mais comment auriez-vous fait si vous aviez dû
créer un système d'authentification ? Eh bien, le router aurait été au cœur de votre login.
Vous auriez séparé votre application entre les routes non authentifiées, telles qu'une page
d'inscription, de connexion, etc., et les routes authentifiées. À chaque requête sur une page
authentifiée, vous auriez dû passer un token secret permettant de vous authentifier à l'API
:

Si le token est correct, pas de souci, vous récupérez vos données.

En cas d'erreur de token, vous recevez une erreur qui a pour conséquence de vous
rediriger automatiquement côté router de React sur la partie non authentifiée avec
Redirect.
 Vous pouvez en apprendre plus sur l'authentification avec React Router dans cet article
(en anglais).

Exercez-vous


Vous avez la base de votre application, félicitations à vous. C'est maintenant le moment de voler
de vos propres ailes.

Vous trouverez la base de l'exercice sur la branche P1C2-begin. Vos objectifs sont les suivants :

Créer une nouvelle page   Results   et l'ajouter au router.

Créer une nouvelle page   Freelances   , l'ajouter au router, et créer un lien dans le  
Header   .

Dans   Survey.jsx   , coder un lien   précédent   et un lien   suivant   qui permettent

respectivement de passer à la question précédente et à la question suivante. 
Si la question actuelle est à 1, le lien "précédent" n'est pas activé. 
Si la question est à 10, le lien "suivant" ne s'affiche pas. À la place, il y aura un lien
"Résultats" qui redirigera vers la page "Results".

La solution se trouve sur P1C2-solution.

En résumé


Avec les single page applications (SPA), l'utilisateur a l'impression de naviguer sur
différentes pages, mais il n'existe qu'une seule page HTML sur laquelle le contenu est greffé
avec JavaScript.
React Router est une des bibliothèques qui permettent de transformer une app React en
SPA.
Le Router, les Routes et Switch permettent de gérer l'affichage des différentes pages.
 Il est possible de passer des paramètres dans une route et de les récupérer avec  
useParams()   .

En indiquant une route sans path à la fin du Switch, cela permet de capturer toutes les
routes dont le path ne correspond à aucune route déclarée, et donc de créer une page 404.

Notre application contient maintenant les pages nécessaires pour la suite ! 🎉 Au prochain
chapitre, nous allons sécuriser nos props avec les PropTypes. Alors, RdV au prochain chapitre !

INDIQUER QUE CE CHAPITRE N'EST PAS TERMINÉ

INDIQUEZ LES TYPES DE VOS PROPS

 ARCHITECTUREZ VOTRE PROJET 
AVEC LES PROPTYPES

Le professeur
Alexia Toulmet
Développeuse Fullstack React/Node freelance passionnée par le frontend 👩‍💻

OPENCLASSROOMS

OPPORTUNITÉS

AIDE

POUR LES ENTREPRISES

EN PLUS

Français