Partagez un exemple d'utilisation de React pour obtenir les paramètres de routage dans un composant

Cet article présente principalement l'explication détaillée de la façon dont React obtient les paramètres de routage dans les composants. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer aux

Paramètres

Supposons que nous ayons de nombreuses pages de liste. À l'exception du contenu dynamique de ces pages, les autres parties de la page sont les mêmes. Comment devons-nous configurer le routage et les composants à ce stade ?

Dans ce scénario, vous devez utiliser la fonction de paramètre de routage et ajouter une configuration de routage contenant des paramètres.

import List from './component/list';

<Route path="list/:id" component={List} />

Notez que le :id dans le chemin

attribut est le paramètre ( param ) de la route. Jetons un coup d'œil aux composants de la page Liste.

/list 对应了 list.js

import React from 'react';
class List extends React.Component {
 render () {
 return (
 <p>
 <h3>This is List page.</h3>
 <p>The list page id is 
  <b style={{color: &#39;red&#39;}}>{this.props.params.id}</b>
 </p>
 </p>
 );
 }
};
export default List;

Dans le composant List, vous pouvez accéder à la valeur réelle du paramètre directement via this.props.params.id (la clé d'identification ici est la même que le chemin défini : id correspondant à), React Router transmet toutes les données de routage au composant de page via des accessoires, afin que vous puissiez accéder très facilement aux données liées au routage.

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!