Comment transmettre des paramètres dans le routeur React

Comment transmettre des paramètres dans React Router : 1. Utilisez des caractères génériques pour transmettre des paramètres. Vous ne pouvez transmettre que des chaînes et les paramètres ne seront pas perdus lors de l'actualisation de la page. 2. Utilisez une requête pour transmettre des paramètres. le rafraîchissement de la page entraînera la perte des paramètres ; 3. Utilisez l'état pour transmettre les paramètres. Vous pouvez transmettre des objets, des tableaux, etc. Une fois la page actualisée, les paramètres seront perdus.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Comment transmettre des paramètres dans le routeur React

Il existe trois façons de transmettre des paramètres dans le routage du routeur React : transmettre des paramètres via des caractères génériques, des paramètres de requête et des paramètres d'état.

1. Passage des paramètres génériques

Méthode de définition de l'itinéraire :

<Route path=&#39;/path/:name&#39; component={Path}/>

Composant de lien :

<Link to="/path/通过通配符传参">通配符</Link>

Acquisition des paramètres :

this.props.match.params.name

Avantages : simple et rapide, et lors du rafraîchissement du page , les paramètres ne seront pas perdus.

Inconvénients : Seules les chaînes peuvent être transmises, et si trop de valeurs sont transmises, l'url deviendra longue et moche.

Si vous souhaitez transférer un objet, vous pouvez utiliser JSON.stringify() pour le convertir en chaîne, puis utiliser JSON.parse() pour le reconvertir après l'avoir reçu sur une autre page.

2. Query

Méthode de définition d'itinéraire :

<Route path=&#39;/query&#39; component={Query}/>

Composant de lien :

var query = {undefined
        pathname: '/query',
        query: '我是通过query传值 '
}

<Link to={query}>query</Link>

Acquisition de paramètres :

this.props.location.query

Avantages : Objet élégant et transférable

Inconvénients : Actualiser le page, Les paramètres sont perdus

3, état

Méthode de définition de l'itinéraire :

<Link to={state}>state</Link>

Composant de lien :

var state = {undefined
        pathname: '/state',
        state: '我是通过state传值'
    }
    <Route path=&#39;/state&#39; component={State}/>

Acquisition des paramètres :

this.props.location.state

ici this.props.location.state === 'Je transmets la valeur par requête'

Avantages : Objets élégants et transférables

Inconvénients : Actualisez la page, les paramètres sont perdus

Apprentissage recommandé : "Tutoriel vidéo React"

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!