Navigation avec React Router React Js Partie A Guide du routage dans les applications React

Bienvenue dans notre série React ! Dans les articles précédents, nous avons abordé des concepts essentiels tels que les composants, l'état, les accessoires et la gestion des événements. Il est maintenant temps d'explorer le routage dans les applications React à l'aide de React Router. Le routage vous permet de naviguer entre différentes vues ou composants au sein de votre application, créant ainsi une expérience utilisateur transparente ?.

Qu’est-ce que React Router ?

React Router est une bibliothèque puissante qui permet le routage dans les applications React. Il vous permet de définir plusieurs itinéraires dans votre application et de restituer des composants spécifiques en fonction du chemin de l'URL. Cette fonctionnalité est cruciale pour créer des applications monopage (SPA) où la navigation ne nécessite pas un rechargement complet de la page.

Installation de React Router
Pour commencer, vous devrez installer React Router. Vous pouvez le faire en utilisant npm :

npm install react-router-dom

Configuration du routage de base

Créons une application simple avec plusieurs itinéraires. Nous allons créer une application avec une page d'accueil, une page à propos et une page de contact.

1. Créer des composants de base
Tout d’abord, créez trois composants : Accueil, À propos et Contact.

// Home.js
import React from 'react';

const Home = () => {
    return <h1>Home Page</h1>;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
    return <h1>About Page</h1>;
};

export default About;

// Contact.js
import React from 'react';

const Contact = () => {
    return <h1>Contact Page</h1>;
};

export default Contact;

2. Configurer le routeur
Maintenant, configurons le routeur dans votre fichier d'application principal, généralement App.js.

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
    return (
        <Router>
            <nav>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/contact">Contact</Link>
                    </li>
                </ul>
            </nav>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
            </Switch>
        </Router>
    );
};

export default App;

Explication :

• Routeur : le composant BrowserRouter enveloppe l'intégralité de l'application, permettant le routage.
• Lien : Le composant Link est utilisé pour créer des liens de navigation qui modifient l'URL sans recharger la page.
• Route : le composant Route définit un chemin et le composant à restituer lorsque le chemin correspond.
• Switch : le composant Switch garantit qu'une seule route est rendue à la fois.

Navigation entre les pages
Une fois la configuration terminée, vous pouvez désormais naviguer entre les pages Accueil, À propos et Contact en cliquant sur les liens dans le menu de navigation. React Router gérera les modifications d'URL et restituera le composant approprié sans actualiser la page.

Paramètres d'itinéraire
Vous pouvez également définir des itinéraires avec des paramètres, vous permettant de transmettre des données dynamiques. Par exemple, créons un composant Utilisateur qui affiche les informations utilisateur en fonction de l'ID utilisateur dans l'URL.

1. Créer le composant utilisateur
Utilisateur.js :

import React from 'react';
import { useParams } from 'react-router-dom';

const User = () => {
    const { userId } = useParams();
    return <h1>User ID: {userId}</h1>;
};

export default User;

2. Mettre à jour le routeur
Ajoutez une route pour le composant User dans votre App.js :

<Route path="/user/:userId" component={User} />

Itinéraires imbriqués

React Router prend également en charge les routes imbriquées, qui vous permettent de restituer les routes enfants au sein d'un composant parent. Ceci est utile pour créer des mises en page complexes.

Exemple d'itinéraires imbriqués :

1. Créez un composant Dashboard avec des itinéraires imbriqués :

npm install react-router-dom

1. Mettez à jour votre App.js pour inclure l'itinéraire du tableau de bord :

// Home.js
import React from 'react';

const Home = () => {
    return <h1>Home Page</h1>;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
    return <h1>About Page</h1>;
};

export default About;

// Contact.js
import React from 'react';

const Contact = () => {
    return <h1>Contact Page</h1>;
};

export default Contact;

Maintenant, en accédant à /dashboard/profile ou /dashboard/settings, les composants respectifs seront affichés dans le tableau de bord.

Dans cet article, nous avons exploré comment implémenter le routage dans une application React à l'aide de React Router. Nous avons couvert la configuration d'un routage de base, la navigation entre les pages, l'utilisation des paramètres d'itinéraire et la création d'itinéraires imbriqués.

Avec ces concepts, vous pouvez créer un système de navigation structuré pour vos applications React, améliorant l'expérience utilisateur et permettant un rendu de contenu dynamique.

Dans le prochain article, nous approfondirons l'utilisation de React Hooks, en nous concentrant sur useEffect et sur la façon dont il peut gérer les effets secondaires dans les composants fonctionnels. Restez à l'écoute !

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!