Guide de traitement du routage dynamique React : Comment implémenter le routage dynamique des pages frontales et le passage des paramètres

Guide de traitement du routage dynamique React : Comment implémenter le routage de page dynamique frontal et le passage de paramètres

Introduction :
Dans les applications React, le routage est l'un des mécanismes clés pour réaliser des sauts de page front-end et le passage de paramètres. Pour les applications volumineuses ou les situations dans lesquelles des pages dynamiques doivent être traitées, un traitement de routage flexible est essentiel. Cet article présentera comment implémenter le routage dynamique des pages et le passage de paramètres dans React, et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre.

1. Revue des connaissances de base du routage React
Dans React, nous utilisons souvent la bibliothèque React Router pour implémenter des fonctions de routage. React Router fournit le composant pour définir les règles de routage et utilise le composant Les composants de routage de base incluent principalement BrowserRouter, HashRouter, Route, Link, etc. Pour une utilisation détaillée de React Router, veuillez vous référer à la documentation officielle.

2. Implémenter le routage dynamique des pages

1. Définir des règles de routage
   Dans React, nous pouvons définir des règles de routage via le composant Dans les règles de routage, les paramètres dynamiques peuvent être utilisés pour faire correspondre différentes URL afin d'implémenter le routage dynamique des pages.

Par exemple, nous souhaitons définir une règle de routage dynamique pour faire correspondre les URL sous la forme "/user/:id", où :id représente les paramètres dynamiques. Nous pouvons définir des règles de routage comme ceci :

2. Traitement des paramètres dynamiques
   Après avoir défini les règles de routage dynamique, nous pouvons dans le composant correspondant Obtenir le paramètres transmis dans l’URL via des accessoires.

Dans l'exemple ci-dessus, la règle de routage "/user/:id" que nous avons définie correspondra aux URL sous la forme "/user/123". Dans le composant UserDetail, nous pouvons obtenir les paramètres dynamiques dans l'URL via props.match.params.

Des exemples spécifiques sont les suivants :
importer React depuis 'react';
importe { Route } depuis 'react-router-dom';

const UserDetail = (props) => {

const userId = props.match.params.id;
return (
    <div>
        <h1 id="User-Detail-Page">User Detail Page</h1>
        <p>User ID: {userId}</p>
    </div>
);

};

export UserDetail par défaut ;

3. Implémenter le passage des paramètres

1. Utiliser le passage des paramètres de requête
   En plus de transmettre des paramètres via des paramètres de routage dynamique, nous pouvons également utiliser des paramètres de requête pour transmettre des paramètres. Grâce au paramètre Query, nous pouvons ajouter directement des paramètres à l'URL, tels que "/user?id=123", puis obtenir le paramètre via props.location.search dans le composant cible.

Des exemples spécifiques sont les suivants :
importer React depuis 'react' ;

const UserDetail = (props) => {

const searchParams = new URLSearchParams(props.location.search);
const userId = searchParams.get('id');
return (
    <div>
        <h1 id="User-Detail-Page">User Detail Page</h1>
        <p>User ID: {userId}</p>
    </div>
);

};

exporter UserDetail par défaut ;

2. Utilisez le paramètre state pour passer
   En plus du paramètre Query, nous pouvons également utiliser le paramètre state pour transmettre des paramètres. Le paramètre state n'apparaît pas dans l'URL, mais est stocké dans l'objet location.state. Nous pouvons transmettre le paramètre state via le deuxième paramètre lors du passage à la page.

Des exemples spécifiques sont les suivants :
importer React depuis 'react';
importer { Link } depuis 'react-router-dom';

const UserList = () => {

const userList = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

return (
    <div>
        <h1 id="User-List-Page">User List Page</h1>
        <ul>
            {userList.map(user => (
                <li key={user.id}>
                    <Link
                        to={{
                            pathname: `/user/${user.id}`,
                            state: { name: user.name }
                        }}
                    >
                        {user.name}
                    </Link>
                </li>
            ))}
        </ul>
    </div>
);

};

export default UserList ;

Dans l'exemple ci-dessus, lorsque nous accédons à la page, nous transmettons un objet via l'attribut to, où pathname spécifie l'URL cible, et l'attribut state peut transmettre n'importe quel paramètre. Dans le composant UserDetail, nous pouvons obtenir les paramètres transmis via props.location.state.

Résumé :
Grâce à React Router, nous pouvons implémenter le routage dynamique des pages frontales et le passage de paramètres. Lors de la définition des règles de routage, vous pouvez utiliser des paramètres dynamiques pour faire correspondre différentes URL et obtenir des paramètres via props.match.params. De plus, les paramètres peuvent également être transmis via les paramètres de requête et les paramètres d'état. Lorsque vous utilisez le paramètre Query, vous pouvez obtenir les paramètres via props.location.search ; lorsque vous utilisez le paramètre state, vous pouvez obtenir les paramètres via props.location.state.

Ce qui précède est une brève introduction au traitement de routage dynamique React, et des exemples de code spécifiques sont utilisés pour aider les lecteurs à mieux comprendre la méthode de mise en œuvre du traitement de routage. Dans le développement réel, nous pouvons choisir la manière appropriée de gérer le routage dynamique des pages et le passage des paramètres en fonction des besoins.

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!