Apprenez React Router en 5 minutes - Tutoriel pour débutant

Parfois, vous n'avez que 5 minutes à perdre. Au lieu de le gaspiller sur les réseaux sociaux, faisons une introduction de 5 minutes à React-Router! Dans ce tutoriel, nous allons apprendre les bases du routage dans React en créant la navigation pour un site Web de magasin de tricot Scrimba. Ce n'est pas réel, mais peut-être un jour ...;)

Si vous voulez une bonne introduction à ce sujet, vous pouvez rejoindre la liste d'attente pour mon prochain cours avancé React, ou si vous êtes encore un débutant, consultez mon cours d'introduction sur React.

Qu'est-ce que React-Router, de toute façon?

De nombreux sites Web modernes sont en fait constitués d'une seule page, ils ressemblent simplement à plusieurs pages car ils contiennent des composants qui se présentent comme des pages séparées. Ceux - ci sont généralement appelés SPAS - de ingle- p age a pplications. À la base, ce que fait React Router est de rendre conditionnellement certains composants à afficher en fonction de la route utilisée dans l'URL ( /pour la page d'accueil, /aboutpour la page à propos, etc.).

Par exemple, nous pouvons utiliser React Router pour connecter www.knit-with-scrimba.com/ à www.knit-with-scrimba.com/about ou www.knit-with-scrimba.com/shop

Sonne bien - comment puis-je l'utiliser?

Pour utiliser React Router, vous devez d'abord l'installer à l'aide de NPM:

npm install react-router-dom 

Alternativement, vous pouvez simplement utiliser ce terrain de jeu dans Scrimba, dont le code complet est déjà écrit.

Vous devrez importer BrowserRouter, Route et Switch à partir du react-router-dompackage:

import React, { Component } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; 

Dans mon exemple, je lie la page de destination avec deux autres "pages" (qui ne sont en fait que des composants) appelées Shopet About.

Tout d'abord, vous devrez configurer votre application pour qu'elle fonctionne avec React Router. Tout ce qui sera rendu devra aller à l'intérieur de l' élément, alors enveloppez votre application en premier. C'est le composant qui fait toute la logique d'affichage des différents composants que vous lui fournissez.

// index.js ReactDOM.render(   , document.getElementById('root') ) 

Ensuite, dans votre composant App, ajoutez l' Switchélément (balises d'ouverture et de fermeture). Cela garantit qu'un seul composant est rendu à la fois. Si nous ne l'utilisons pas, nous pouvons utiliser par défaut le Errorcomposant, que nous écrirons plus tard.

function App() { return (     ) } 

Il est maintenant temps d'ajouter vos balises. Ce sont les liens entre les composants et doivent être placés à l'intérieur des balises.

Pour indiquer aux balises quel composant charger, ajoutez simplement un pathattribut et le nom du composant que vous souhaitez charger avec l' componentattribut.

De nombreuses URL de page d'accueil sont le nom du site suivi "/", par exemple, de www.knit-with-scrimba.com/ . Dans ce cas, nous ajoutons exactà la balise Route. C'est parce que les autres URL contiennent également "/", donc si nous ne disons pas à l'application qu'elle doit juste chercher /, elle charge la première pour correspondre à la route, et nous obtenons un bug assez délicat à gérer.

function App() { return (        ) } 

Importez maintenant les composants dans l'application. Vous souhaiterez peut-être les avoir dans un dossier «composants» séparé pour garder le code propre et lisible.

import Home from './components/Home'; import About from './components/About'; import Shop from './components/Shop'; 

Sur ce message d'erreur que j'ai mentionné plus tôt, qui se charge si un utilisateur tape une URL incorrecte. C'est comme une balise normale , mais sans chemin. Le composant Error contient

Oops! Page not found!

. N'oubliez pas de l'importer dans l'application.

function App() { return (         ) } 

Jusqu'à présent, notre site n'est navigable qu'en tapant les URL. Pour ajouter des liens cliquables vers le site, nous utilisons l' Linkélément de React Router et mettons en place un nouveau Navbarcomposant. Encore une fois, n'oubliez pas d'importer le nouveau composant dans l'application.

Ajoutez maintenant un Linkpour chaque composant dans l'application et utilisez to="URL"pour les lier.

function Navbar() { return ( Home  About Us  Shop Now ); }; 

Votre site dispose désormais de liens cliquables qui peuvent vous guider dans votre application d'une seule page!

Conclusion

Donc là nous l'avons. Si vous souhaitez naviguer facilement dans une application React, oubliez les balises d'ancrage et ajoutez React Router. C'est propre, organisé et cela facilite grandement l'ajout et la suppression de pages.

Pour en savoir plus sur React Hooks et d'autres fonctionnalités intéressantes de React, vous pouvez rejoindre la liste d'attente de mon prochain cours avancé React.

Ou si vous recherchez quelque chose de plus convivial pour les débutants, vous pouvez consulter mon cours d'introduction sur React.

Bon codage;)