Если у вас есть маршрут, например:
<Route path="/users/:userId" />
И затем вы экспортируете этот маршрут, и поэтому его можно использовать в вашем приложении, например:
export const MY_ROUTE = '/users/:userId/';
<Route path={MY_ROUTE} />
Как вы устанавливаете параметр в ссылке динамически? то есть я хотел бы сделать это:
<Link to={MY_ROUTE} params={{userId: 1}} />
но параметры полностью игнорируются... и запрос просто делает запрос (? userId =) не параметром... любые идеи?
Взято из Официальные документы 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, вы можете экспортировать функцию userLink как таковую:
function userLink(userId) {
return `/users/${userId}/`;
}
а затем используйте это везде, где вы хотите использовать Link для маршрута.
Ниже вы можете найти поддерживаемые параметры и API, выставленные на компоненте Link:
Я знаю, что это старый вопрос, но с помощью React Router V4 вы можете использовать пакет path-to-regexp, который также используется React Router 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>
Вы можете создать функцию, которая интерполирует параметр userId для создания маршрута, примерно так:
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,console