Реагировать на роутер, передавать данные при навигации программно?

Мы могли бы перейти к другому пути, используя

this.props.router.push('/some/path')

Есть ли способ отправить параметры (объект) при навигации?

Есть и другие варианты, о которых я могу думать, но интересно, возможно ли прохождение object?

  • Я мог встроить id объекта и восстановить объект с сервера с новой страницы.

  • Или я мог бы хранить объект в глобальном хранилище, например, в магазине redux. (Этот объект нужно скоро удалить из магазина. Поэтому я думаю, что это может быть нехорошо поставить его в первую очередь)

Ответы

Ответ 1

React Router использует объекты location. Одним из свойств объекта location является state.

this.props.router.push({
  pathname: '/other-page',
  state: {
    id: 7,
    color: 'green'
  }
})

На странице, на которую выполняется переход, текущий компонент location будет введен в компонент, маршрут которого согласован, поэтому вы можете получить доступ к состоянию с помощью this.props.location.state.

Следует иметь в виду, что не будет state, если пользователь перейдет непосредственно на страницу, поэтому вам все равно потребуется какой-то механизм для загрузки данных, когда он не существует.

Ответ 2

Если вы используете React Router 4 или 5, текущие ответы устарели. Вызовите history.push и передайте объект как второй параметр для передачи состояния:

props.history.push('/other-page', { id: 7, color: 'green' }))

Затем вы можете получить доступ к данным о состоянии в "/other-page" через:

props.location.state

Ответ 3

Передача параметров запроса при программной навигации в ответном маршрутизаторе

Объекты истории могут использоваться программным образом для изменения текущего местоположения с использованием history.push и history.replace.

    history.push('/home?the=query', { some: 'state' })

Если мы передадим объект истории в компонент в качестве реквизита. Затем мы можем программно программировать, используя методы реагирования маршрутизатора, доступные в объекте history.

Теперь предположим, что вы передаете объект истории в качестве оповещения, называемой "маршрутизатор". Поэтому он будет ссылаться внутри компонента с синтаксисом на основе классов, например:

this.props.router

При использовании push или replace вы можете указать как путь URL, так и состояние как отдельные аргументы или включить все в один объект, похожий на местоположение, в качестве первого аргумента.

this.props.router.push('/some/path?the=query')

Или вы можете использовать один объект, подобный местоположению, для указания как URL-адреса, так и состояния. Это эквивалентно приведенному выше примеру.

this.props.router.push({
  pathname: '/some/path',  //path
  search: '?the=query' // query param named 'search'
})

Примечание. Конечно, убедитесь, что this.props.router на самом деле является объектом истории из agent-маршрутизатора api.

Ответ 4

Мне не удалось заставить это работать с реагирующим маршрутизатором v4+. Но работает следующее:

//I.e. add navigate using the history stack and pass context as the 2nd parameter
this.props.history.push('/takeTest', {
  subjectsList: this.props.subjectsList.filter(f => f.isChecked === true)
})

Ответ 5

Я не знаю, какую версию вы используете, но вы можете указать объект как параметр react-router:

let {router} = this.props;
router.push({pathname: "/newpath", query: {id: 1}) // will create the url /newpath?id=1

Ответ 6

если вы хотите отправить его в строке запроса

this.props.router.push({
  pathname: '/payment-history',
  query: {
    email: rowData.email
  }
})