Comprendre React Router : un guide étape par étape pour les débutants

#React Router est l'une des bibliothèques les plus populaires pour gérer la navigation dans les applications React. Il permet aux développeurs de créer des applications d'une seule page (SPA) avec un routage dynamique, créant ainsi une expérience utilisateur transparente et réactive. Dans ce guide, nous explorerons les principes fondamentaux de React Router et comment l'utiliser pour créer la navigation dans votre application React.

Qu’est-ce que React Router ?

React Router est une bibliothèque qui permet de gérer la navigation et le routage dans les applications React

Pourquoi utiliser React Router ?

1. Navigation dynamique :

Permet des transitions fluides entre les vues sans recharger la page.

2. Routage déclaratif :

Les itinéraires sont définis à l'aide de JSX, ce qui les rend faciles à lire et à gérer.

3. Itinéraires imbriqués :

Permet des hiérarchies de routage complexes.

4. Prend en charge les paramètres URL :

Active le rendu de contenu dynamique basé sur l'URL.

Premiers pas avec React Router

Installation

Pour utiliser React Router, installez la bibliothèque via npm ou Yarn :
npm installez réagir-router-dom
ou
fil ajouter réagir-router-dom

Configuration de base

Voici comment configurer React Router dans une application React simple :

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function Home() {
  return <h2 id="Home-Page">Home Page</h2>;
}

function About() {
  return <h2 id="About-Page">About Page</h2>;
}

function App() {
  return (
    <router>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
      <routes>
        <route path="/" element="{<Home"></route>} />
        <route path="/about" element="{<About"></route>} />
      </routes>
    </router>
  );
}

export default App;

• BrowserRouter : enveloppe l'application et fournit une fonctionnalité de routage.
• Routes : Un conteneur pour définir plusieurs itinéraires.
• Route : Définit un chemin et son composant associé

Principales fonctionnalités du routeur React

1. Itinéraires dynamiques

React Router prend en charge les routes dynamiques à l'aide de paramètres d'URL.

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';

function User() {
  const { id } = useParams(); // Access the dynamic URL parameter
  return <h2 id="User-ID-id">User ID: {id}</h2>;
}

function App() {
  return (
    <router>
      <routes>
        <route path="/user/:id" element="{<User"></route>} />
      </routes>
    </router>
  );
}

export default App;

2. Liens de navigation

Utilisez les composants Link ou NavLink au lieu de balises pour de meilleures performances.

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <link to="/">Home
      <link to="/about">About
    </nav>
  );
}

• Lien : empêche le rechargement d'une page entière, ce qui rend la navigation plus rapide.
• NavLink : fournit des styles actifs pour l'itinéraire actuellement actif.

3. Chargement paresseux

Optimisez les performances en chargeant les composants paresseusement.

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <router>
      <suspense fallback="{<div">Loading...}>
        <routes>
          <route path="/" element="{<Home"></route>} />
          <route path="/about" element="{<About"></route>} />
        </routes>
      </suspense>
    </router>
  );
}

export default App;

Conclusion

React Router simplifie la navigation dans les applications React en fournissant un moyen déclaratif et dynamique de gérer les itinéraires. Que vous créiez des SPA simples ou des applications imbriquées complexes, la maîtrise de React Router améliorera considérablement vos compétences en développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!