Как передать параметры с помощью history.push/Link/Redirect в реакции-маршрутизаторе v4?

Ответ 1

Прежде всего, вам не нужно делать var r = this; как это в if statement относится к контексту самого обратного вызова, который, так как вы используете функцию стрелки, ссылается на контекст компонента React.

Согласно документам:

Объекты истории обычно имеют следующие свойства и методы:

• длина - (число) Количество записей в стеке истории
• action - (строка) Текущее действие (PUSH, REPLACE или POP)

• Местоположение - (объект) Текущее местоположение. Может иметь следующие свойства:

  • путь - (строка) путь URL
  • поиск - (строка) Строка запроса URL
  • hash - (строка) URL-фрагмент хеша
  • состояние - (строка) специфичное для местоположения состояние, которое было предоставлено, например, push (путь, состояние), когда это местоположение было помещено в стек. Доступно только в браузере и истории памяти.
• push (путь, [состояние]) - (функция) Добавляет новую запись в стек истории
• replace (путь, [состояние]) - (функция) Заменяет текущую запись в стеке истории
• go (n) - (function) Перемещает указатель в стеке истории на n записей
• goBack() - (функция) Эквивалент go (-1)
• goForward() - (function) Эквивалент go (1)
• блок (подсказка) - (функция) Предотвращает навигацию

Таким образом, во время навигации вы можете передавать реквизиты для объекта истории, как

this.props.history.push({
  pathname: '/template',
  search: '?query=abc',
  state: { detail: response.data }
})

или аналогично для компонента Link или компонента Redirect

<Link to={{
      pathname: '/template',
      search: '?query=abc',
      state: { detail: response.data }
    }}> My Link </Link>

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

this.props.location.state.detail

Также имейте в виду, что при использовании объектов истории или местоположения из реквизита необходимо подключить компонент с помощью withRouter.

Согласно Документам:

withRouter

Вы можете получить доступ к свойствам объектов истории и ближайшему совпадению <Route>'s через withRouter высшего порядка withRouter. withRouter будет перерисовывать свой компонент каждый раз, когда маршрут изменяется с теми же реквизитами, что и реквизиты <Route> props: { match, location, history }.

Ответ 2

Если вам нужно передать параметры URL

Theres большое пост объяснение Тайлер Макгиннис на своем сайте, ссылка на пост

Вот примеры кода:

1. на компоненте history.push:

   this.props.history.push(/home:${this.state.userID})

2. на компоненте роутера вы определяете маршрут:

   <Route path='/home:myKey' component={Home}/>

3. на домашнем компоненте:

   componentDidMount(){ const { myKey } = this.props.match.params console.log(myKey ) }

Ответ 3

ты можешь использовать,

this.props.history.push("/template", {...response }) или this.props.history.push("/template", { response: response })

затем вы можете получить доступ к проанализированным данным из компонента /template, выполнив следующий код:

const state = this.props.location.state

Вот ссылка на документацию API

Ответ 4

Не нужно использовать с рутером. Это работает для меня:

На вашей родительской странице

<BrowserRouter>
   <Switch>
        <Route path="/routeA" render={(props)=> (
          <ComponentA {...props} propDummy={50} />
        )} />

        <Route path="/routeB" render={(props)=> (
          <ComponentB {...props} propWhatever={100} />
          )} /> 
      </Switch>
</BrowserRouter>

Затем в ComponentA или ComponentB вы можете получить доступ

this.props.history

объект, включая метод this.props.history.push.

Ответ 5

Добавить информацию для получения параметров запроса.

const queryParams = new URLSearchParams(this.props.location.search);
console.log('assuming query param is id', queryParams.get('id');

Для получения дополнительной информации о URLSearchParams проверьте эту ссылку URLSearchParams