React-router Link, перейдите в params

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

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

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

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

<Route path={MY_ROUTE} />

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

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

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

Ответы

Ответ 1

Взято из Официальные документы 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:

API-интерфейс маршрутизатора

Ответ 2

Я знаю, что это старый вопрос, но с помощью 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>

Ответ 3

Вы можете создать функцию, которая интерполирует параметр 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