Comment transmettre des accessoires dans le composant \"Link\" de React-Router ?

Passer les accessoires dans le "Lien" de React-Router

Lorsque vous utilisez React avec React-Router, vous pouvez transmettre des propriétés à une nouvelle vue en utilisant une syntaxe modifiée dans le fichier composant.

Syntaxe mise à jour dans React-Router v4 et v5

Pour transmettre des accessoires dans React-Router v4 et v5, utilisez la syntaxe suivante :

<Link to={{ pathname: path, query: queryObject, search: searchString }}>
  ...
</Link>

où :

• pathname est le chemin d'accès à la nouvelle vue.
• query est un objet contenant des paramètres de requête.
• search est une chaîne représentant le chaîne de requête, telle que ?foo=bar.

Accès aux accessoires dans le composant de destination

Dans le composant de destination, vous pouvez accéder aux accessoires transmis via le Créez un lien en utilisant les techniques suivantes :

Utilisation obsolète du composant d'ordre supérieur withRouter :

• Enveloppez le composant de destination avec withRouter, qui permet d'accéder au accessoires de correspondance et de localisation :

const NewView = withRouter(OriginalView);

Implémentation actuelle à l'aide de hooks :

• Utilisez les hooks useParams et useLocation dans le composant fonctionnel pour accéder au accessoires de correspondance et de localisation :

const NewView = () => {
  const { testvalue } = useParams();
  const { query, search } = useLocation();

  return (
    <div>
      {testvalue} {query.backUrl}
    </div>
  );
};

Exemple

Considérons l'exemple suivant :

App.js :

<Link to={{ pathname: '/ideas/:testvalue', query: { testvalue: 'hello' } }}>Create Idea</Link>

CreateIdeaView.js :

const CreateIdeaView = () => {
  const { testvalue } = useParams();
  console.log(testvalue); // prints 'hello'

  return (
    <div>{testvalue}</div>
  );
};

Dans cet exemple, cliquer sur le lien « Créer une idée » transmet la propriété testvalue avec la valeur bonjour au composant CreateIdeaView.

Remarque :

• Le chemin dans le composant Lien doit inclure l'espace réservé du paramètre, par exemple. chemin : '/ideas/:testvalue'.
• Le hook useParams renvoie un objet avec tous les paramètres définis dans le chemin.
• Le hook useLocation renvoie un objet avec des informations sur l'emplacement actuel, y compris la requête et la recherche.
• La requête est un objet contenant des paires clé-valeur, tandis que la chaîne de recherche contient la chaîne de requête entière.

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!