Pour toute application React non triviale, vous devez la diviser en plusieurs pages. Pour ce faire, il devient nécessaire de mettre en œuvre un routage réactif.
Cela peut être un sujet intimidant au début. Cependant, ce didacticiel vous permettra de vous familiariser avec toutes les bases nécessaires. Dans ce didacticiel, nous allons créer une application qui utilise le routage.
Table des matières
Qu’est-ce que le routage React (routage côté client)
Le routage React est une forme de routage côté client implémenté dans les applications React. Le routage côté client est une alternative au routage côté serveur. Dans le routage côté serveur, le navigateur envoie une requête GET au serveur Web chaque fois que vous accédez à une autre page. Cette demande peut prendre quelques secondes avant que vous obteniez une réponse.
Pour une application Web où vous vous déplacez constamment entre les pages, le temps d’attente crée une mauvaise expérience utilisateur. Le routage côté client est une alternative à cela. Au lieu de fournir du HTML au navigateur, l’application utilise JavaScript pour générer le HTML pour différentes pages.
Il vous suffit de fournir un fichier index.html comme point d’entrée pour que votre application fonctionne. Ce point d’entrée charge ensuite votre code JavaScript. Le bundle JavaScript rendra les pages en manipulant le DOM, en gérant le routage et en implémentant les fonctionnalités de l’application.
Étant donné que le serveur restitue uniquement la page index.html, l’application est appelée une application à page unique.
Avantages du routage côté client
- Cela crée une meilleure expérience utilisateur car la navigation est plus rapide et l’application sera plus réactive. Avec le routage côté serveur, chaque navigation est une requête réseau avec quelques secondes de latence.
- Il permet la création d’applications hors ligne car tout le code requis pour exécuter l’application peut être mis en cache localement. Cela vous permet de créer davantage d’applications disponibles et d’offrir des fonctionnalités hors ligne.
- L’application utilisera également moins de données car les requêtes réseau seront considérablement réduites si tout est envoyé une seule fois et si certains fichiers sont mis en cache localement.
- Cela réduit également la charge du serveur, car celui-ci ne doit restituer l’application qu’une seule fois. Cela contraste avec le rendu côté serveur, où le serveur restitue continuellement l’application.
Voyons ensuite comment implémenter le routage de réaction.
Comment implémenter le routage React
Pour ce didacticiel, nous allons créer une application simple de prise de notes. Il sera composé de plusieurs pages. Nous implémenterons le routage côté client à l’aide de React Router DOM pour permettre au client de naviguer entre les différentes pages. Nous ne construirons pas tout pour que l’application fonctionne. Nous nous concentrerons plutôt sur le routage.
Conditions préalables
Pour suivre ce tutoriel, vous devez comprendre HTML, JavaScript et React. Vous devrez également installer Node.js et NPM. Vous pouvez les télécharger et les installer simultanément en installant Nodejs depuis le site web. Ou suivez le guide dans la vidéo YouTube intégrée.
Ce que nous construisons
L’application aura plusieurs pages. En utilisant le routage de réaction, vous pourrez naviguer vers différentes pages. Les designs des pages sont présentés ci-dessous.
La page d’accueil est rendue sur la route ‘/’.
La page À propos est rendue sur la route « /about ».
Page Notes sur l’itinéraire ‘/notes’.
Nouvelle page de notes sur l’itinéraire ‘/notes/new’.
Vous pouvez voir chaque note dans son intégralité sur la page de notes. Cette page est rendue sur la route ‘/routes/
Commencer
Pour commencer, créez un nouveau projet React. Je vais utiliser Vite, donc la commande pour initialiser un nouveau projet est la suivante :
npm create vite@latest scribbble --template react
J’ai spécifié « scribbble » comme nom du projet et React comme modèle. Ensuite, je vais ouvrir VS Code en utilisant les commandes ci-dessous :
cd scribbble code .
Une fois VS Code ouvert, je reviendrai à la fenêtre du terminal et installerai react-router-dom. Ce package facilite la mise en œuvre du routage de réaction dans vos applications.
npm install react-router-dom
Nous allons créer un fichier dans lequel nos notes seront stockées. Créez un fichier src/notes.js et ajoutez le code suivant :
const notes = [
{
id: 1,
title: "Note 1",
body: "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.",
},
{
id: 2,
title: "Note 2",
body: "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.",
},
{
id: 3,
title: "Note 3",
body: "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.",
},
];
export default notes;
Ensuite, supprimez le fichier src/App.css. Nous ne l’utiliserons pas dans ce projet. Assurez-vous également de supprimer l’importation du fichier App.css du fichier App.jsx.
Après cela, remplacez tout ce qui se trouve dans le fichier index.css par ceci :
:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;color:#404040}*{margin:0;padding:0}.nav-container{display:flex;justify-content:space-between;padding:15px 30px}.home-buttons,.nav{display:flex;gap:10px}a{text-decoration:none;color:inherit;font-weight:600}h1{font-size:63px;margin:20px 0}input,textarea{border:1px solid #f1f1f1;background-color:#fafafa;outline:0;padding:10px;width:100%}textarea{resize:none;font-family:inherit}.container{padding:15px}.primary{background-color:#8a2be2;color:#fff}.secondary{background-color:#eee}.button{padding:15px 30px;font-size:16px;border:none;font-weight:700;border-radius:7px;cursor:pointer}.home-container{height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}.new-note-container{padding:20px}.new-note-form{display:flex;flex-direction:column;align-items:center;width:500px;gap:20px;margin:auto;border-radius:7px;padding:20px 30px}.notes-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:0 60px}.note{border:1px solid #d3d3d3;padding:15px;border-radius:7px}.note h2{font-size:1rem;margin-bottom:10px}.note p{color:#585858;font-size:.9rem;cursor:pointer}.note-container{display:flex;align-items:center;justify-content:center;padding:50px}.note-content{width:500px}Ensuite, créez les fichiers suivants pour les pages que nous allons créer :
- src/pages/Home.jsx
- src/pages/À propos.jsx
- src/pages/Note.jsx
- src/pages/NewNote.jsx
- src/pages/Notes.jsx
Créez ensuite le fichier pour le composant Barre de navigation. Ce fichier sera situé dans src/components/NavBar.jsx
Configuration du routage React
Une fois notre application configurée, nous configurerons ensuite le routage dans notre application.
Ouvrez le fichier App.jsx et supprimez tout ce qu’il contient. Ensuite, ajoutez les importations suivantes en haut du fichier :
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { NavBar } from "./components/NavBar";
import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { Notes } from "./pages/Notes";
import { Note } from "./pages/Note";
import { NewNote } from "./pages/NewNote";Nous importons les composants BrowserRouter, Routes et Routes depuis React-Router-dom. Ceux-ci serviront à configurer un routeur. Ensuite, nous avons importé la NavBar de notre répertoire de composants et plusieurs pages de nos fichiers de pages. Nous n’avons pas encore implémenté les pages, mais nous le ferons bientôt.
Ensuite, nous allons configurer notre composant App :
export default App () {
}Ensuite, nous ajoutons le balisage suivant dans notre instruction return :
return (
<BrowserRouter>
</BrowserRouter>
)Cela restitue le BrowserRouter, un composant React fourni par le composant réagir-router-dom. Ce composant configure un routeur qui fonctionne dans le navigateur. Notre application sera contenue dans ces balises.
Ensuite, nous ajouterons la barre de navigation et créerons un composant Routes.
return (
<BrowserRouter>
<NavBar />
<div className="container">
<Routes>
</Routes>
</div>
</BrowserRouter>
);À l’intérieur de l’élément BrowserRouter, nous avons ajouté une NavBar. Nous définirons cet élément plus tard, mais il crée les liens en haut de chaque page. Au lieu de l’écrire séparément pour chaque page, nous allons créer une NavBar.
Ensuite, nous avons créé un élément conteneur. Cet élément n’est pas nécessaire au routage. Nous venons de l’ajouter pour appliquer le style.
À l’intérieur du conteneur, nous avons ajouté le composant Routes. C’est ici que différentes pages seront rendues en fonction de l’itinéraire emprunté par le navigateur. Tout ce qui se trouve à l’intérieur du composant Routes sera restitué à chaque fois que l’itinéraire change.
Enfin, nous ajoutons les itinéraires pour les différentes pages.
return (
<BrowserRouter>
<NavBar />
<div className="container">
<Routes>
<Route path="/" Component={Home} />
<Route path="about" Component={About} />
<Route path="notes" Component={Notes}>
<Route path="new" Component={NewNote} />
<Route path=":id" Component={Note} />
</Route>
</Routes>
</div>
</BrowserRouter>
);Le composant Home sera rendu lorsque le chemin est « / », et le composant About sera rendu sur la route « /about ». Le composant Notes sera rendu sur la route ‘/notes’. Nous avons également la route ‘/notes/new’ et ‘/notes/:id’ définies comme routes imbriquées.
Itinéraires imbriqués expliqués
Une route peut contenir des routes internes. C’est ce qu’on appelle des routes imbriquées. Le chemin vers ces routes imbriquées sera joint à la route parent pour former le chemin complet. Par exemple, les itinéraires « notes » et « new » seront combinés en « /notes/new ».
Quant à la façon dont les composants sont rendus lorsque l’utilisateur accède à l’itinéraire parent, seul le composant parent sera rendu. Cependant, les composants parent et imbriqués seront restitués ensemble lorsqu’ils parcourront l’itinéraire imbriqué.
Pour restituer les deux composants ensemble, le composant Notes doit restituer un composant Outlet qui spécifie l’emplacement où le composant Note sera intégré. Vous le verrez plus tard lorsque nous commencerons à créer les pages.
Itinéraires dynamiques
Jusqu’à présent, nous avons spécifié l’itinéraire littéral auquel nous souhaitons correspondre. Par exemple, les itinéraires « / » et « à propos ». Cependant, réagissez-router-dom nous permet de spécifier des itinéraires dynamiques. Un itinéraire dynamique contient une partie qui peut être comparée à un paramètre de requête. Une fois mis en correspondance, le paramètre de requête est transmis à la page.
Par exemple, à l’intérieur de la route parent ‘posts’, nous avons une route imbriquée qui contient une partie dynamique spécifiée par :id. Cette route accepte n’importe quel texte à la place de :id , et ce texte devient disponible pour le composant Note sous le nom d’id.
Construire la barre de navigation
Nous utilisons des composants Link au lieu des balises d’ancrage normales pour naviguer à l’aide de React-Router-dom. Par conséquent, notre barre de navigation devrait ressembler à ceci :
import { Link } from "react-router-dom";
export function NavBar() {
return (
<div className="nav-container">
<Link to="/">Scribbble</Link>
<nav className="nav">
<Link to="/about">About</Link>
<Link to="/notes">Notes</Link>
<Link to="/notes/new">New Note</Link>
</nav>
</div>
);
}
Ajoutez le code à src/pages/NavBar.jsx.
Construire les pages
Ensuite, nous allons construire les pages. Pour la page d’accueil, ajoutez le code suivant au src/pages/Home.jsx.
import { useNavigate } from "react-router-dom";
export function Home() {
const navigate = useNavigate();
return (
<div className="home-container">
<h1>Notes for professionals</h1>
<div className="home-buttons">
<button
onClick={() => {
navigate("/notes/new");
}}
className="button primary"
>
Start Scribbling
</button>
<button
onClick={() => {
navigate("/notes");
}}
className="button secondary"
>
View Notes
</button>
</div>
</div>
);
}
Dans la page d’accueil, nous aimerions utiliser des boutons pour naviguer. En conséquence, nous utilisons le hook useNavigate pour naviguer par programme. Nous avons importé le hook, puis l’avons appelé dans le composant Home. La valeur de retour après avoir appelé le hook est une fonction que vous pouvez utiliser pour naviguer.
Ensuite, nous définirons la page À propos. Ajoutez le code suivant à votre fichier src/pages/About.jsx.
export function About() {
return (
<div>
<h1>About</h1>
<p>Simple Notes is the best note-taking application for professionals</p>
</div>
);
}Après cela, nous définirons la page Notes.
Dans ce composant, nous devons également inclure un composant Outlet qui sera utilisé pour restituer toutes les routes imbriquées. Pour cette raison, notre page src/pages/Notes.jsx ressemblera à ceci.
import { Outlet, useNavigate } from "react-router-dom";
import notes from "../notes";
export function Notes() {
const navigate = useNavigate();
return (
<div>
<Outlet />
<div className="notes-list">
{notes.map((note) => {
return (
<div
className="note"
key={note.id}
onClick={() => {
navigate("/notes/" + note.id);
}}
>
<h2>{note.title}</h2>
<p>{note.body.slice(0, 100)}</p>
</div>
);
})}
</div>
</div>
);
}Ensuite, nous définissons la page Note.
Ceci sera rendu pour une note individuelle. Pour décider d’une note à restituer, Notes accédera à l’identifiant spécifié dans la partie dynamique de l’itinéraire. Pour ce faire, nous utilisons le hook userParams. Par conséquent, cela devrait être du code dans votre fichier src/pages/Note.jsx :
import { useParams } from "react-router-dom";
import notes from "../notes";
export function Note() {
const params = useParams();
const note = notes.find((note) => note.id == params.id);
return (
<div className="note-container">
<div className="note-content">
<h2>{note.title}</h2>
<p>{note.body}</p>
</div>
</div>
);
}
Enfin, nous allons créer le composant NewNote dans le src/pages/NewNote.jsx en utilisant le code suivant :
export function NewNote() {
return (
<div class="new-note-container">
<form class="new-note-form">
<h2>New Note</h2>
<input type="text" name="title" placeholder="Note title" />
<textarea rows="10" placeholder="Note text" />
<button class="button primary">Save Note</button>
</form>
</div>
);
}À ce stade, nous avons écrit tout le code de l’application. Vous pouvez exécuter l’application à l’aide de npm run dev. Accédez à différentes pages et voyez à quelle vitesse le routage côté client est.
Inconvénients du routage côté client
Malgré ses nombreux avantages, le routage côté client présente plusieurs inconvénients. Ceux-ci sont expliqués ci-dessous :
- Le chargement initial de la page peut être lent car l’intégralité de l’application doit être chargée. Le bundle JavaScript peut être très volumineux, nécessitant de longs temps de chargement.
- Étant donné que JavaScript génère le balisage, la page ne sera pas optimisée pour le référencement.
- Parce que tout repose sur JavaScript, les navigateurs qui ne prennent pas en charge JavaScript ou dont JavaScript est désactivé ne pourront pas exécuter l’application.
Conclusion
Dans cet article, nous avons couvert le routage de réaction en créant un petit projet. Bien que nous n’ayons pas tout couvert, ce didacticiel couvre les concepts que vous utiliserez dans la plupart des projets sur lesquels vous travaillerez. Pour plus d’informations sur React-Router-Dom, voici les documents officiels.
Ensuite, lisez cet article sur les bibliothèques de formulaires React.