Routage dynamique dans React

Le routage dynamique dans React vous permet de créer des itinéraires basés sur des données ou des paramètres dynamiques, permettant une navigation plus flexible et plus puissante au sein de votre application. Ceci est particulièrement utile pour les applications qui doivent restituer différents composants en fonction des entrées de l'utilisateur ou d'autres facteurs dynamiques.

Configuration du routage dynamique avec React Router
Vous utiliserez généralement la bibliothèque React-Router-dom pour implémenter le routage dynamique dans React. Voici un guide étape par étape :

Installer React Router : Tout d'abord, vous devez installer React-Router-dom si vous ne l'avez pas déjà fait :
npm installez réagir-router-dom

Créer des itinéraires : définissez vos itinéraires à l'aide du composant. Utilisez des segments dynamiques dans le chemin pour capturer les paramètres.
JavaScript

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

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/user/:id" component={UserProfile} />
            </Switch>
        </Router>
    );
};

export default App;

Accéder aux paramètres de route : utilisez le hook useParams pour accéder aux paramètres dynamiques au sein de vos composants.
JavaScript

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

const UserProfile = () => {
    const { id } = useParams();

    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};

export default UserProfile;

Exemple : profils utilisateur dynamiques
Créons un exemple simple dans lequel nous naviguons vers différents profils d'utilisateurs en fonction de l'ID utilisateur dans l'URL.

Composant Accueil : ce composant aura des liens vers différents profils d'utilisateurs.
JavaScript

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

const Home = () => {
    return (
        <div>
            <h1>Home</h1>
            <ul>
                <li><Link to="/user/1">User 1</Link></li>
                <li><Link to="/user/2">User 2</Link></li>
                <li><Link to="/user/3">User 3</Link></li>
            </ul>
        </div>
    );
};

export default Home;

Composant UserProfile : ce composant affichera l'ID utilisateur à partir de l'URL.
JavaScript

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

const UserProfile = () => {
    const { id } = useParams();

    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};

export default UserProfile;

Composant d'application : ce composant configure le routeur et définit les itinéraires.
JavaScript

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

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/user/:id" component={UserProfile} />
            </Switch>
        </Router>
    );
};

export default App;

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!