Comment passer des accessoires en lien avec React-Router ?

Passer des accessoires dans Link React-Router

Le composant Link de React-Router permet de transmettre des données entre les composants. Pour ce faire, définissez un paramètre dans la prop to du lien, et la valeur de ce paramètre est accessible dans le composant lié à l'aide de this.props.

Problème :

Le code fourni n'a pas réussi à transmettre les accessoires au composant lié car le chemin d'accès était manquant dans le fichier définition.

Solution :

Ajoutez le paramètre path au paramètre définition :

<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />

Transmission de données à l'aide de l'emplacement :

Lors de l'utilisation de React-Router v4/v5, les données peuvent être transmises via l'objet de localisation :

Lien (Requête) :

<Link to={{pathname: '/', query: {backUrl: 'theLinkData'}}} />

Lien (Recherche) :

<Link to={{pathname: '/', search: '?backUrl=theLinkData'}} />

Accès aux données (composant fonctionnel ):

const CreatedIdeaView = () => {
  const { query, search } = useLocation();
  console.log(query.backUrl, new URLSearchParams(search).get('backUrl'));
};

Accès aux données (composant de classe) :

class CreateIdeaView extends React.Component {
  render() {
    console.log(this.props.location.query.backUrl);
    return <div>{this.props.location.query.backUrl}</div>;
  }
}

Exemple :

class App extends React.Component {
  render() {
    return (
      <div>
        <Link to={{pathname: '/ideas', query: {foo: 'bar'}}} />
        <RouteHandler />
      </div>
    );
  }
}

class Ideas extends React.Component {
  render() {
    const { match, location } = this.props;
    console.log('props form link', this.props);
    return <p>{location.query.foo}</p>;
  }
}

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!