logo

TechCodeview

Réagir au routeur

Réagir au routeur , est votre outil essentiel pour créer des applications monopage (SPA). Imaginez que les utilisateurs passent sans effort d'une section à l'autre, expérimentant votre site Web comme une application fluide et que React Router le rend possible, ouvrant la voie à une expérience utilisateur agréable et à une présence Web moderne. Un site Web React ne devrait pas signifier qu'une grande page se recharge à chaque fois que les utilisateurs naviguent.

Cet article vous aide à vous guider dans le monde de React Router et vous découvrirez le concept React Router et ses capacités. Restez à l'écoute pour libérer le potentiel d'une navigation fluide et élever vos projets React au niveau supérieur !

Table des matières



concaténer la chaîne Java

Comme il n'y a pas de routage intégré dans React, le routeur React JS permet la prise en charge du routage dans React et la navigation vers différents composants dans des applications multipages. Il restitue les composants pour les itinéraires correspondants et les URL attribuées.

Qu'est-ce qu'un routeur React ?

Réagir au routeur est une bibliothèque standard pour le routage dans Réagir . Il permet la navigation entre les vues de divers composants dans une application React, permet de modifier l'URL du navigateur et maintient l'interface utilisateur synchronisée avec l'URL. Créons une application simple pour React pour comprendre le fonctionnement du React Router. L'application contiendra trois composants composant maison , le À propos du composant , et le composant de contact . Nous utiliserons React Router pour naviguer entre ces composants.

Étapes pour utiliser React Router

Étape 1: Initialisez un projet React. Consultez cet article pour configuration de l'application React

Étape 2: Installez React-Router dans votre application, écrivez la commande suivante dans votre terminal

npm i react-router-dom>

Étape 3 : Importation du routeur React

convertir un entier en chaîne C++ 
import { BrowserRouter, Routes, Route } from 'react-router-dom';>

Structure des dossiers :

structure_répertoire

Les dépendances mises à jour dans package.json déposer.

clé d'entrée 
'dependencies': {  '@testing-library/jest-dom': '^5.17.0',  '@testing-library/react': '^13.4.0',  '@testing-library/user-event': '^13.5.0',  'react': '^18.2.0',  'react-dom': '^18.2.0',  'react-router-dom': '^6.22.1',  'react-scripts': '5.0.1',  'web-vitals': '^2.1.4' },>

Composants du routeur React

Les principaux composants de React Router sont :

  • NavigateurRouteur : BrowserRouter est une implémentation de routeur qui utilise l'API d'historique HTML5 (pushState, replaceState et l'événement popstate) pour garder votre interface utilisateur synchronisée avec l'URL. C'est le composant parent qui est utilisé pour stocker tous les autres composants.
  • Itinéraires : C'est un nouveau composant introduit dans la v6 et une mise à niveau du composant. Les principaux avantages de Routes over Switch sont :
    • Parents et s
    • Les itinéraires sont choisis en fonction de la meilleure correspondance au lieu d'être parcourus dans l'ordre.
  • Itinéraire: Route est le composant affiché sous condition qui restitue une interface utilisateur lorsque son chemin correspond à l'URL actuelle.
  • Lien: Le composant de lien est utilisé pour créer des liens vers différents itinéraires et mettre en œuvre la navigation autour de l'application. Cela fonctionne comme une balise d'ancrage HTML.

Implémentation du routeur React

Exemple: Cet exemple montre la navigation à l'aide de React-Router-dom vers les composants Accueil, À propos et Contact.

Javascript 
// Filename - App.js import React, { Component } from 'react'; import {  BrowserRouter as Router,  Routes,  Route,  Link, } from 'react-router-dom'; import Home from './component/home'; import About from './component/about'; import Contact from './component/contact'; import './App.css'; class App extends Component {  render() {  return (    
  
      
  •   Maison  
    •   
  •   À propos de nous  
    •   
  •   Contactez-nous  
    •   
    }>  }>  }>    
  );  } } exporter l'application par défaut ;>
Javascript 
// Filename - component/home.js import React from 'react'; function Home() {  return 
Bienvenue dans le monde des Geeks !
; } exporter la page d'accueil par défaut ;>
Javascript 
// Filename - component/about.js import React from 'react'; function About() {  return (  
  
techcodeview.com est un portail informatique pour les geeks !
Apprenez-en davantage sur nous sur :  
// Filename - component/contact.js import React from 'react'; function Contact() {  return (   
Vous pouvez nous trouver ici: 
techcodeview.com 
5e et 6e étages, Royal Kapsons, A-118, 
Secteur - 136, Noida, Uttar Pradesh (201305)
); } exporter le contact par défaut ;>
  
    Étape pour exécuter l'application :    Ouvrez le terminal et tapez la commande suivante.
 
npm start>
    Sortir:    Ouvrez le navigateur et notre projet est affiché dans l'URL      http://localhost:3000/      . Maintenant, vous pouvez cliquer sur les liens et accéder à différents composants. React Router maintient l'interface utilisateur de votre application synchronisée avec l'URL.
  
Enfin, nous avons implémenté avec succès la navigation dans notre application React à l'aide de React Router.