web-dev-qa-db-fra.com

React-router Link, passez les paramètres

Si vous avez un itinéraire tel que:

<Route path="/users/:userId" />

Et puis vous exportez cet itinéraire, et il peut donc être utilisé dans votre application, comme:

export const MY_ROUTE = '/users/:userId/';

<Route path={MY_ROUTE} />

Comment définir dynamiquement le paramètre dans un lien? c'est-à-dire que je voudrais faire ceci:

<Link to={MY_ROUTE} params={{userId: 1}} />

mais params est totalement ignoré ... et la requête fait juste une requête (? userId =) pas un param ... des idées?

reactjsreact-routerreact-router-redux
15
Elliot

Tiré de Documents officiels React Router :

Du guide de mise à niveau de 1.x à 2.x:

<Link to>, onEnter et isActive utilisent les descripteurs d'emplacement

<Link to> peut désormais prendre un descripteur d'emplacement en plus des chaînes. Les accessoires de requête et d'état sont obsolètes.

// v1.0.x

<Link to="/foo" query={{ the: 'query' }}/>

// v2.0.0

<Link to={{ pathname: '/foo', query: { the: 'query' } }}/>

Malheureusement, il n'y a pas de support pour passer un objet param, vous l'avez vous-même vu.

Pour utiliser dynamiquement l'itinéraire que vous avez proposé, vous devez faire quelque chose comme:

<Link to={ MY_ROUTE.replace(':userId', '<someUserIdFromSomewhere>') }/>

Vous pouvez également optimiser davantage au lieu d'exporter une chaîne pour MY_ROUTE, vous pouvez exporter une fonction userLink comme telle:

function userLink(userId) {
    return `/users/${userId}/`;
}

puis utilisez-le partout où vous souhaitez utiliser un Link pour l'itinéraire.

Ci-dessous, vous pouvez trouver les paramètres pris en charge et l'API exposés sur le composant Link:

API Router Link

8
Elod Szopos

Je sais que c'est une vieille question, mais avec React Router V4 vous pouvez utiliser le path-to-regexp package, qui est également utilisé par React Router V4.

Exemple:

import {Link} from 'react-router-dom';
import {compile} from 'path-to-regexp';

const MY_ROUTE = '/users/:userId/';
const toPath = compile(MY_ROUTE);

// Now you can use toPath to generate Links dynamically
// The following will log '/users/42' to the console
console.log( toPath({ userId: 42 }) );

Bien sûr, vous pouvez également utiliser la méthode toPath pour créer des liens appropriés, par exemple:

<Link to={toPath({ userId: 42 })}>My Link</Link>
5
bummzack

Vous pouvez créer une fonction qui interpole le paramètre userId pour créer la route, quelque chose comme ceci:

export const MY_ROUTE = (userId) => `/users/${userId}/`;

<Route path={MY_ROUTE(':userId')} />

Et donc dans votre composant

<Link to={MY_ROUTE(1)} params={{userId: 1}} />

Essayez cette solution ici: https://jsbin.com/pexikoyiwa/edit?js,console

4
NickGnd