Le didacticiel du routeur Reach

Guide de démarrage rapide de l'utilisation de Reach Router dans votre application React

Dans le dernier projet que j'ai fait, j'ai utiliséAtteindre le routeuret je pense que c'est le moyen le plus simple d'avoir un routage dans une application React.

Je pense que c'est beaucoup plus facile queRouteur React, qui est un autre routeur que j'ai utilisé dans le passé.

Voici un tutoriel de 5 minutes pour en comprendre les bases.

Installation

Tout d'abord, installez-le en utilisant

npm install @reach/router

Si la@La syntaxe est nouvelle pour vous, c'est une fonctionnalité npm pour autoriser un package de portée. Un espace de noms, en d'autres termes.

Ensuite, importez-le dans votre projet.

import { Router } from '@reach/router'

Utilisation de base

Je l'utilise dans le fichier React de premier niveau,index.jsdans uncreate-react-appinstallation, enveloppant tous les composants que je souhaite voir apparaître:

ReactDOM.render(
  <Router>
    <Form path="/" />
    <PrivateArea path="/private-area" />
  </Router>,
  document.getElementById('root')
)

Lepathl'attribut que j'ajoute aux composants me permet de définir le chemin pour eux.

En d'autres termes, lorsque je tape ce chemin dans la barre d'URL du navigateur, Reach Router me montre ce composant spécifique.

Le/path est la route d'index et s'affiche lorsque vous ne définissez pas d'URL / de chemin à côté du domaine d'application. La «page d'accueil», en d'autres termes.

La route par défaut

Lorsqu'un utilisateur visite une URL qui ne correspond à aucune route, Reach Router redirige par défaut vers le/route. Vous pouvez ajouter undefaultroute pour gérer ce cas et afficher un joli message «404» à la place:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area" />
  <NotFound default />
</Router>

Modifier l'itinéraire par programme

Utilisez lenavigatepour modifier l'itinéraire par programmation dans votre application:

import { navigate } from '@reach/router'
navigate('/private-area')

Utilisez leLinkcomposant à lier à vos itinéraires à l'aide de JSX:

import { Link } from '@reach/router'
<Link to="/">Home</Link>
<Link to="/private-area">Private Area</Link>

Paramètres d'URL

Ajoutez des paramètres à l'aide du:paramsyntaxe:

<Router>
  <User path="users/:userId" />
</Router>

Maintenant, dans ce composant utilisateur hypothétique, nous pouvons obtenir leuserIdcomme accessoire:

const User = ({ userId }) => (
  <p>User {userId}</p>
)

Itinéraires imbriqués

Je vous ai montré comment les itinéraires peuvent être définis de cette manière dans votre fichier React de niveau supérieur:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area" />
</Router>

Vous pouvez définir des itinéraires imbriqués:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area">
    <User path=":userId" />
  </PrivateArea>
</Router>

Alors maintenant, vous pouvez avoir votre/private-area/23232point de lien vers le composant utilisateur, en passant leuserId 23232.

Vous pouvez également choisir d'autoriser un composant à définir ses propres itinéraires à l'intérieur. Vous utilisez le/*wildcard après l'itinéraire:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area/*" />
</Router>

puis à l'intérieur du composant, vous pouvez à nouveau importer le routeur et définir son propre ensemble de sous-routes:

//component PrivateArea
<Router>
  <User path="/:userId" />
</router>

Tout itinéraire utilisant/private-area/somethingsera gérée par le composant Utilisateur, et la partie après l'itinéraire sera envoyée comme sonuserIdsoutenir.

Pour afficher quelque chose dans le/private-arearoute maintenant, vous devez également ajouter un/gestionnaire dans lePrivateAreacomposant:

//component PrivateArea
<Router>
  <User path="/:userId" />
  <PrivateAreaDashboard path="/" />
</router>

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: