React-router Link, pass in params

Если у вас есть маршрут, например: 

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

и затем вы экспортируете этот маршрут, и поэтому его можно использовать в вашем приложении, например:

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

<Route path={MY_ROUTE} />

как вы устанавливаете параметр в ссылке динамически? т. е. я хотел бы сделать это:

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

но params полностью игнорируется... и query просто делает запрос (?userId=) не парам... есть идеи?

13
react-router react-router-redux reactjs

3 ответов

принято от React Router официальные документы:

из руководства по обновлению с 1.x-2.x:

<Link to>, onEnter и isactive используют дескрипторы местоположения

<Link to> теперь можно взять дескриптор местоположения в дополнение к строкам. Реквизиты запроса и состояния устарели.

/ / v1.0.x

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

/ / v2.0.0

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

к сожалению, нет поддержка прохождения в param объект, вы сами это видели.

чтобы динамически использовать предложенный вами маршрут, вам нужно будет сделать что-то вроде:

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

или вы можете дополнительно оптимизировать, вместо экспорта строки для MY_ROUTE, вы можете экспортировать такие как:

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

а затем используйте это везде, где вы хотите использовать Link на маршрут.

ниже вы можете найти поддержку параметры и API, выставленные на Link компоненты:

Router Link API

5

вы можете создать функцию, которая интерполирует userId param для создания маршрута, что-то вроде этого: 

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

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

и так в компоненте

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

попробуйте вот это решение : https://jsbin.com/pexikoyiwa/edit?js, консоль

3

Я знаю, что это старый вопрос, но с React Router V4 вы можете использовать path-to-regexp пакет, который также используется маршрутизатором React V4.

пример:

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 }) );

конечно, вы можете использовать toPath метод для создания правильных ссылок, а также, например:

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