Передача значений через React-Router v4 <link/>

Вопрос: Как я могу передать опору или одно значение, например _id, через компонент Link React-Router Link и поймать его на конечной точке?

Вот что я имею в виду: пусть говорят, что мы на странице /a. Ссылка возьмет пользователя в /b. Как таковой <Link to='/b'>. Теперь мне нужно передать _id через ссылку, от /a, до /b.

<Link to='/b' params={_id}>blah blah</Link>

Идентификатор, который я пытаюсь передать, является свойством объекта, в который вложен компонент Link.

Я нашел этот синтаксис params={} в другом потоке StackOverflow. Мой код скомпилирован без нарушения, так что, вероятно, это сработало? Однако я не уверен, как получить это переданное значение в конечной точке.

Любая помощь будет оценена.

Ответ 1

Передача реквизита

Вы можете передать произвольные реквизиты на маршрут через объект state:

<Link to={{ pathname: '/route', state: { foo: 'bar'} }}>My route</Link>

Затем вы можете получить доступ к объекту state из своего компонента:

const {foo} = props.location.state

console.log(foo) // "bar"

Передача параметров

Настройте маршрут маршрута, чтобы принять именованные параметры (:id):

<Route path='/route/:id' exact component={MyComponent} />

Затем вы можете передать параметры URL, такие как идентификаторы в своей ссылке, to:

<Link to={'route/foo'}>My route</Link>

Вы можете получить доступ к параметру в компоненте с помощью match объекта:

const {id} = props.match.params

console.log(id) // "foo"

источники

Ответ 2

Чтобы передавать данные через компонент "Ссылка", вы можете просто принять параметр в фактической ссылке.

<Link to={'/b/${_id}'}>blah blah</Link>

и в Маршруте вы бы установили что-то подобное

<Route path="b/:id" name="routename" component={foo}></Route>

Затем вы можете получить доступ к параметру на новом маршруте через this.props.match.params.id

Если вам действительно не нужен ваш идентификатор в фактическом маршруте, он становится немного более раздражающим.

Ответ 3

Если вы хотите отправить более одного параметра через маршрут, вы можете сделать это следующим образом.

Элемент 1.Link

<Link to={'/exchangeClicked/${variable1} ,${variable2},${variable3}'} >Click
</Link>

2. Сконфигурируйте свой маршрут маршрута, чтобы принять эти параметры

<Route
      exact
      path="/exchangeClicked/:variable1,:variable2,:variable3"
      component={MyComponent}
 />

3.Вы можете получить доступ к параметру в новом маршруте через,

<Typography variant="h4" color="inherit">
    Exchange:{this.props.match.params.variable1}
</Typography>


<Typography variant="Body 1" color="inherit">
    Type:{this.props.match.params.variable2}
</Typography>

<Typography variant="Body 1" color="inherit">
    Durabiliy:{this.props.match.params.variable3}
</Typography>