React Router V6: Guide du débutant & # x27;

Ce tutoriel fournit un guide complet pour React Router V6, la principale bibliothèque de routage pour les applications React. Apprenez à gérer efficacement les URL et la navigation dans vos projets de réaction.

Points d'apprentissage clés:

• Mastering React Router V6: Ce guide couvre les principes fondamentaux de la configuration et de l'utilisation du routeur React V6 pour la navigation transparente et la gestion des URL dans vos applications de réact.
• Navigation et rendu de route: Découvrez comment créer des routes dynamiques et imbriquées en utilisant des composants centraux comme <routes></routes>, <route></route>, et <link>, y compris l'utilisation de paramètres de chemin pour le routage flexible.
• Techniques de routage avancées: Explorez des concepts avancés tels que les itinéraires protégés, la navigation programmatique avec useNavigate, et les dernières améliorations de React Router V6.4, vous permettant de créer des solutions de routage sophistiquées pour les applications de réact modernes .

Introduction:

React excelle dans la création d'applications Web dynamiques avec plusieurs vues (pages). Contrairement aux applications traditionnelles de plusieurs pages, la navigation ne devrait pas recharger toute la page. Au lieu de cela, les vues doivent être en douceur dans la page existante. React Router y parvient de manière déclarative, garantissant une expérience utilisateur transparente. Les utilisateurs s'attendent à:

• URL uniques pour chaque vue: Autoriser le signet (par exemple, www.example.com/products).
• Boutons arrière / avant fonctionnels: La navigation standard du navigateur devrait fonctionner comme prévu.
• URL pour les vues imbriquées: Structures dynamiques et imbriquées (par exemple, example.com/products/shoes/101).

L'approche déclarative du routeur React simplifie le routage en spécifiant la structure de l'itinéraire souhaitée:

<Route path="/about" element={<About />} />

Les composants

<Route> peuvent être placés n'importe où dans la structure de votre application. La simplicité de composants comme <Route>, <Link>, et d'autres API du routeur React facilite la mise en œuvre du routage.

Remarque importante: React Router est une bibliothèque tierce maintenue par le logiciel Remix, pas un Facebook / Meta Product officiel.

Présentation:

Ce tutoriel couvre:

1. Configuration du routeur React and React Utilisation de NPM.
2. Concepts de routage de base.
3. routage imbriqué.
4. routage imbriqué dynamique avec les paramètres de chemin.
5. Implémentation des routes protégées.

Le code de projet complet est disponible sur github (lien à insérer ici).

Configuration du routeur de réact:

Vous aurez besoin de node.js installé. Sinon, téléchargez-le sur le site officiel de Node.js. Envisagez d'utiliser un gestionnaire de version pour la gestion Node.js plus facile. NPM (Node Package Manager) est regroupé avec Node.js. Vérifiez l'installation:

<Route path="/about" element={<About />} />

Créer un nouveau projet React à l'aide de Create React App:

node -v
npm -v

Installer React Router Dom:

npx create-react-app react-router-demo
cd react-router-demo

Démarrez le serveur de développement:

npm install react-router-dom

Votre application React avec REACT ROUTER fonctionne maintenant à http://localhost:3000/.

REACT ROUTER BASICS:

Nous créerons une application avec trois vues: Accueil, catégories et produits.

Le composant du routeur

Enveloppez votre composant d'application principale avec un routeur: BrowserRouter ou HashRouter. BrowserRouter (L'utilisation de l'API d'histoire HTML5) est généralement préférée pour les URL plus propres:

npm start

objet d'histoire

Chaque routeur crée un objet historique gérant la pile de navigation. Modifications apportées à la réinstallation du déclenchement de l'emplacement. useNavigate (Hook) fournit une fonction navigate pour la navigation programmatique.

Composants de liaison et d'itinéraire

<Route> rend l'interface utilisateur si l'emplacement correspond au chemin. <Link> fournit une navigation sans rechargement de page.

Mise à jour App.js:

// src/index.js
import { BrowserRouter } from 'react-router-dom';
// ...
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Cela met en place la navigation et le routage de base.

routage imbriqué:

NEST ROUTIES EN PLACKING <Route> COMPOSANTS DANS D'AUTRES COMPOSANTS <Route>. Cela reflète la structure d'URL imbriquée.

Modifier App.js:

import { Link, Route, Routes } from 'react-router-dom';
// ... component definitions for Home, Categories, Products ...
export default function App() {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/categories">Categories</Link></li>
          <li><Link to="/products">Products</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/categories" element={<Categories />} />
        <Route path="/products" element={<Products />} />
      </Routes>
    </div>
  );
}

Créer Categories.js:

import { Link, Route, Routes } from 'react-router-dom';
import { Categories, Desktops, Laptops } from './Categories'; // Import nested route components

// ... other components ...

export default function App() {
  return (
    <div>
      {/* ... navigation ... */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/categories" element={<Categories />}>
          <Route path="desktops" element={<Desktops />} />
          <Route path="laptops" element={<Laptops />} />
        </Route>
        <Route path="/products/*" element={<Products />} /> {/* Note the trailing * */}
      </Routes>
    </div>
  );
}

Le composant <Outlet> rend les routes enfants dans la route parent.

Routing dynamique imbriqué:

Utilisez des paramètres de chemin pour créer des itinéraires dynamiques. Ajoutez un suivi * à l'itinéraire parent pour permettre des itinéraires enfants. Utilisez useParams pour accéder aux paramètres.

Mise à jour Products.js:

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

export const Categories = () => (
  <div>
    <h2>Categories</h2>
    <nav>
      <ul>
        <li><Link to="desktops">Desktops</Link></li>
        <li><Link to="laptops">Laptops</Link></li>
      </ul>
    </nav>
    <Outlet />
  </div>
);

export const Desktops = () => <h3>Desktop PC Page</h3>;
export const Laptops = () => <h3>Laptops Page</h3>;

Le paramètre :productId est accessible dans le composant Product en utilisant useParams.

Routes de protection:

Utiliser useNavigate pour la redirection programmatique et créer un composant personnalisé PrivateRoute.

Créer PrivateRoute.js:

// ... (import statements and productData) ...

const Products = () => (
  <div>
    <h2>Products</h2>
    <ul> {/* ... linkList (generated from productData) ... */} </ul>
    <Routes>
      <Route path=":productId" element={<Product data={productData} />} />
      <Route index element={<p>Please select a product.</p>} />
    </Routes>
  </div>
);

// ... Product component ...

Ajouter un composant Login et intégrer PrivateRoute dans App.js pour protéger la route /admin. N'oubliez pas les considérations de sécurité mentionnées dans la réponse originale.

REACT ROUTER V6.4 Et au-delà:

REACT ROUTER V6.4 INTROSSÉ API DES DONNÉES ET MUTATION API (Inspiré par Remix). Ces API simplifient la récupération et la gestion des données dans les itinéraires à l'aide de chargeurs et d'actions. Cette section aurait besoin d'une explication distincte et plus détaillée.

Résumé:

Ce tutoriel a fourni un aperçu complet de React Router V6, couvrant les concepts de routage de base et avancés. N'oubliez pas de consulter la documentation officielle du routeur React pour les informations et les détails les plus à jour.

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!