Qu'est-ce que le routeur React et qu'est-ce que l'emplacement React

Dans cet article, nous examinons deux options populaires pour créer un routage côté client dans les applications React : React Router et React Location. Quelle est la différence et quand utiliseriez-vous l'un par rapport à l'autre ?

Le routage côté client peut être réalisé dans les applications React à l'aide de différentes bibliothèques externes. La plus populaire de ces bibliothèques est React Routerune bibliothèque de routage open source légère pour React.js construite et maintenue par l'équipe Remix. Fin 2021, Tanner Linsley a introduit React Locationune bibliothèque de routage d'entreprise pour les applications React, afin de résoudre certaines des limitations des mécanismes de routage précédents. Aujourd'hui, React Location est devenu une bibliothèque de routage à part entière.

Dans cet article, nous soulignerons l'importance du routage côté client par rapport au routage côté serveur avant de parcourir le processus de mise en œuvre de React Router dans un application simple de réaction. Enfin, nous présenterons React Location comme alternative à React Router et passerons en revue certaines de ses capacités uniques. Pour continuer, vous avez besoin d'une compréhension de base de React.js.

Routage côté serveur contre routage côté client

Le routage côté serveur est l'approche traditionnelle de gestion des itinéraires dans les applications Web. Le processus consiste à demander une nouvelle page au serveur et à la fournir à l'utilisateur chaque fois qu'un lien est cliqué. Un problème majeur avec le routage côté serveur est que chaque requête entraîne une actualisation complète de la page, ce qui n'est pas efficace dans la plupart des cas.

Contrairement au routage côté serveur, le routage côté client implique que JavaScript gère le processus de routage en interne. Dans le routage côté client, une demande au serveur est empêchée lorsqu'un utilisateur clique sur un lien, donc pas d'actualisation de la page même lorsque l'URL change.

Routage côté client dans React.js

Côté client le routage dans React.js peut être réalisé de différentes manières. Comme indiqué précédemment, nous nous concentrerons sur l'utilisation de ces deux bibliothèques d'assistance : React Router et React Location. Pour continuer, nous allons créer une application React simple qui implémente React Router, puis nous examinerons React Location et certaines de ses fonctionnalités supplémentaires comme alternative.

Qu'est-ce que React Router ?

est une bibliothèque JavaScript utilisée pour gérer le routage côté client et côté serveur dans les applications React. Il permet la création d'applications Web ou mobiles d'une seule page qui permettent la navigation sans rafraîchissement de la page. React Router nous donne également accès aux fonctionnalités d'historique du navigateur tout en conservant une vue correcte de l'application.

React Router utilise une approche de routage basée sur les composants. Il fournit différents composants de routage selon les besoins de l'application. Si vous souhaitez en savoir plus sur ses utilisations, ce blog vaut la peine d'être consulté : Naviguer par programmation avec React Router.

Comment utiliser React Router

Pour illustrer le fonctionnement de React Router, nous besoin de créer un nouveau projet React. Exécutez la commande suivante dans votre terminal :

npx create-react-app demo-routing-app

Veuillez noter que nous utiliserons React Router v6 dans notre application, qui est la dernière version de la bibliothèque à ce jour. Après avoir exécuté avec succès le code ci-dessus, accédez au nouveau répertoire du projet et exécutez la commande suivante pour intégrer react-router dans l'application :

npm install react-router-dom

React Router nous propose deux variantes : react-router-dom pour les applications Web et react-router-native pour les applications mobiles.

Pour continuer, nous devons importez le BrowserRouter de React Router dans le niveau de composant le plus élevé de l'application. Le composant BrowserRouter permet de synchroniser l'interface utilisateur avec l'URL. Il doit donc être placé au-dessus de chaque composant qui utilise Router dans l'application. Pour ce faire, mettez à jour le code dans votre fichier index.js avec ce qui suit :

import React from "react";
import ReactDOM de "react-dom" ;
import "./index.css";
import Application de[19659025]"./App";
import { BrowserRouter } from "react-router-dom";
ReactDOM.rendu(
  <BrowserRouter>
    <App />>NavigateurRouteur>,
  document.getElementById("racine")
);

Maintenant que nous avons enveloppé notre application avec le composant BrowserRouternous pouvons continuer et explorer d'autres composants de base de React Router.

Créons trois composants vers lesquels nous pouvons naviguer dans notre application. : le composant Accueilqui servira d'index de notre application, le composant Contact et le composant Info.

Dans votre src créez un fichier appelé Home.js et ajoutez-y ce qui suit :

import React from "react";
 const Accueil = () => {
  retour (
    <div>>0 h1>Voici la page d'accueil de l'application</h1>
    <[196/59045]div>
  ) ;[19659053]} ;
exporter par défaut Accueil ;

Créez un autre fichier nommé Contact.js et ajoutez-y ce qui suit :

import React from "react";
const[19659062]Contacter = () => {
  retour (
    <div>[19545]div>[19545] ]h1>Voici la page de contact.</h1>
    </div[194>59039] 
  ) ;
} ;
exporter par défaut Contact ;

Enfin, créez un fichier appelé Info.js et ajoutez-y ce qui suit :

import React from "react";
 const Info = () => {
  retour (
    <div>>0 h1>Page d'informationde l'application</h1>
    </[19]div >
  );
};
exporter par défaut Infos;

Maintenant que nos composants d'interface utilisateur sont en place, nous pouvons continuer et créer nos routes et les lier à nos composants.

Remplacez le code dans votre fichier App.js par ce qui suit :

import { Routes, Route, Lien } de "react-router-dom"[1965902] 
importer Accueil de "./Accueil";
importer Contacter de "./Contacter";[19659027]import Infos de "./Info";
import "./App.css";
fonction App[19659026]() {
  return (
    <div className="App">
      <ul>
        <li>
          <Lien vers="/">Accueil<[496/5] Lien>
        </li>
        <li>
          <Lien vers="/contact ">Contacter</Lien>
        </li>
        <[1945]>
          <Lien vers="/info">Info</Lien>[60] </li>
      </ul>
      <Routes>
        <
        <
        90 ="/" élément={<Accueil />}>[1965/Route>
        <Chemin de la route="/contact" élément={0<0 ]Contacter />}></Itinéraire>
         <Chemin d'itinéraire="/info" élément={<Info />}} 19659045]></Itinéraire>
      </Itinéraires>
    </
/
/[04] >
  );
}
exporter application par défaut ;

Nous importons les composants RoutesRoute et Link dans le code ci-dessus. Les Routes garantissent qu'une seule route est gérée à la fois, tandis que le composant Route permet de déclarer quel composant sera rendu sur quelle route. Le lien est fourni par React Router à la place de la balise d'ancrage traditionnelle et est utilisé pour créer un lien vers les différentes routes.

Vous pouvez démarrer votre serveur de développement et accéder à votre navigateur. Voici à quoi ressemble notre application :

Nous avons réussi à implémenter React Router dans une application simple et avons vu comment ses composants de base fonctionnent . Voyons maintenant comment implémenter le routage dans une application React à l'aide de React Location. Il s'agit d'une alternative plus déclarative à React Router et a été initialement introduit comme wrapper pour la version bêta de React Router v6. Pourtant, il est devenu une bibliothèque de routage à part entière. React Location fait tout ce que fait React Router, mais dans un style plus déclaratif.

React Location par rapport à React Router

React Location présente de nombreuses similitudes avec React Router, et il est souvent reconnu comme une meilleure alternative. En fait, React Location possède de nombreuses fonctionnalités uniques qui lui donnent un avantage sur React Router. Nous limiterons notre portée dans cet article à certaines fonctionnalités propres à React Location.

Certaines des fonctionnalités offertes par React Location sont :

• Chargeurs de route
• React location JSURL
• API de paramètres de recherche profondément intégrée[19659230]React devtools
• Éléments de routage asynchrones
• Fractionnement du code
• États en attente

Installation et implémentation de React Location

Pour installer React Location, exécutez la commande suivante dans votre terminal :

npm install react -emplacement --save

Après l'installation, refactorisons notre application de routage de démonstration pour utiliser React Location. Mettez à jour votre fichier App.js avec les éléments suivants :

import React from "react" ;
import { ReactLocation , Routeur, Prise, Lien } de "react-location" ;

import ] Accueil de "./Accueil";
importation Contact de "./Contact";
importation Info from "./Info";
import "./App.css";
const routes = [
  {
    chemin : "/",
    élément : <Accueil />,
  },
  {
    chemin : "/contact",
    élément : <Contacter />,
  },
  {
    chemin : "/info",
    élément : <Info />,
  },
] ;
emplacement const[1945]= nouveau ReactLocation();
fonction App() { { {  (
    <div className="App">
      <Routes de routeur={routes}  emplacement={emplacement}>
        <ul>
          <li[3]94590 <Lien vers="/">Accueil</Lien>
          </[049 ]li>
          <li>
            <Lien vers="/contact">Contacter< /Lien>
          </l i>
          <li>
            <Lien vers="/info">Info<[19659045]/Lien>
          </li>
        </ul> > > > > > > > > > > >  Sortie />
      </Routeur>
    </div>
  )[1965;19659053]}
exporter application par défaut ;

Dans le code ci-dessus, nous importons les composants ReactLocationRouterOutlet et Link de la bibliothèque React Location. Le composant ReactLocation est la base de React Location, et nous en avons créé une instance à la ligne 23 et l'avons transmise au composant Router en tant que prop.

Le Le composant Router est le composant de fournisseur racine pour l'instance de React Location et les configurations de route de l'application. Il gère les configurations de routage de l'application. Le composant Outlet est utilisé pour restituer le contenu des composants en fonction du chemin correspondant, et le composant Link est utilisé pour déclencher la navigation.

Notre application devrait maintenant ressembler à Ce que nous avions auparavant. des uniques. Examinons de plus près quelques-uns de ceux qui sont uniques à React Location.

Chargeurs de route

La manière traditionnelle de mettre en œuvre des routes nécessitant des données consiste à restituer d'abord la route, puis à récupérer les données requises de manière asynchrone à partir du serveur. Cette approche peut convenir dans certains cas, mais React Location fournit une approche différente pour rendre les routes qui nécessitent des données.

Une caractéristique commune de React Location est les chargeurs de route. Un chargeur de route est une fonction qui peut être utilisée pour spécifier les exigences en matière de données pouvant être extraites d'un serveur à l'aide de votre approche d'extraction de données préférée (Axios, extraction, etc.). Les chargeurs de route sont souvent utilisés pour retarder le chargement d'une route jusqu'à ce qu'une action asynchrone soit terminée.
chemin : "/produits",
chargeur : async () => ({
produits chargés : attendre récupérer("/api/products"),
}),[1965] ,
]

Dans le code ci-dessus, nous avons défini notre route pour le chemin/produitspuis implémenté un chargeur de route qui effectue un appel HTTP et renvoie un objet supposé être une liste de produits stockés dans le clé LoadedProducts. Pour en savoir plus sur les route loaders, cliquez ici.

React Location JSURL

JSURL est une élision de JSON et d'encodage d'URL. Il permet de passer des valeurs complexes via des paramètres de requête d'URL. JSURL a été conçu pour être compact, lisible et facile à générer et à analyser. React Location fournit un stringifier et un analyseur alimentés par JSURL. location";
import { parseSearch, stringifySearch } from "react-location-jsurl"0 ]const reactLocation = new ReactLocation({
parseSearch,
stringifySearch,
})

Contrairement à React Router, React Location fournit également des outils de développement. Les devtools aident à visualiser le fonctionnement interne de React Location dans nos applications, et peuvent également être utilisés à des fins de débogage.

Les devtools peuvent être importés dans l'application sans installations supplémentaires en ajoutant la ligne de code suivante à l'application.[19659019]importer { ReactLocationDevtools} à partir de "react-location-devtools" ;

Il convient de noter que la bibliothèque React Location fournit de nombreuses autres fonctionnalités, et nous n'avons fait qu'effleurer la surface.

Conclusion

Dans cet article, nous avons examiné deux options populaires pour créer un routage côté client dans les applications React. : React Router et React Location. Vous savez maintenant comment les utiliser dans vos applications React et quelles sont certaines de leurs caractéristiques distinctives. Si vous avez déjà fait votre choix d'utiliser l'un ou l'autre, déposez une note dans les commentaires et partagez ce qui a influencé votre décision.