Comment transmettre des accessoires à une nouvelle vue dans React Router ?

Passer des accessoires dans Link React-Router

Problème :

Dans une application React-Router, un composant Link est ne pas transmettre les propriétés à une nouvelle vue, bien que les propriétés soient incluses dans les paramètres du lien.

Solution :

Code obsolète (v1) :

<Link to="ideas" params={{ testvalue: "hello" }}></Link>

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

Code à jour (v4/v5) :

// Using query
<Link to={{ pathname: `/${this.props.testvalue}`, query: { backUrl } }} />

// Using search
<Link to={{ pathname: `/${this.props.testvalue}`, search: `?backUrl=${backUrl}` }} />

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

Utilisation :

• La propriété to du prend un objet avec les propriétés suivantes :

  • pathname : Le chemin de la nouvelle vue.
  • params : Un objet contenant les propriétés à transmettre à la nouvelle vue.
• Le composant Route doit avoir une propriété path qui correspond à la valeur du paramètre dynamique dans la propriété to.

Exemple de composant fonctionnel :

<code class="js">const CreatedIdeaView = () => {
  const { testvalue } = useParams();
  const { query, search } = useLocation();
  console.log(testvalue, query.backUrl, new URLSearchParams(search).get('backUrl'));
  return <span>{testvalue} {backurl}</span>;
};</code>

Remarque : Le code ci-dessus utilise les hooks de React-Router-dom.

Exemple de code mis à jour :

<code class="js">const App = () => {
  return (
    <React.Fragment>
      <Link to={{ pathname: '/ideas/:itemID', itemID: 222, item: { okay: 123 } }}>Ideas</Link>
      <Switch>
        <Route exact path="/ideas/:itemID/" component={Ideas} />
        <Route path="/hello/:WORLD?/:thing?" component={World} />
      </Switch>
    </React.Fragment>
  );
};</code>

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!