Как передать данные с помощью истории, чтобы реагировать на функциональные компоненты

Question

Я пытаюсь реализовать перенаправление после выполнения запроса на выборку. Я хочу иметь возможность передавать данные следующему компоненту (странице) с историей реакции.

Это будет go следующим образом:

 const history = useHistory({});
 /* ... */
 history.push({
       pathname: '/page',
       state: { data: data }
 })

А затем получить состояние в приемник, предполагая, что приемник является компонентом, основанным на классе:

this.state.data

Возможно ли достичь чего-то подобного с помощью функциональных компонентов? Какое самое чистое решение этой проблемы?

Спасибо за помощь

Answer 1

данные, которые вы передаете в history.push, не связаны с компонентом класса по своей природе, поэтому с классом или функциональным компонентом вам нужно получить доступ к состоянию местоположения откуда-то, а затем присвоить его состоянию вашего компонента

если функциональный компонент рендерится из маршрута, он должен получить history в качестве реквизита, а затем вы можете получить эти данные, просто выполнив что-то вроде history.location.state. затем вы можете делать с ним все, что захотите, и присваивать ему состояние через useState

. Я думаю, вы можете просто использовать этот хук useHistory, чтобы также получить состояние местоположения.

что-то вроде

function MyComponent() {
  const history = useHistory()

  return <div>
    {JSON.stringify(history.location.state)}
  </div>
}

// Rendered via <Route component={MyOtherComponent} />

function MyOtherComponent({ history }) {
  return <div>
    {JSON.stringify(history.location.state)}
  </div>
}

Answer 2

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

this.props.history.pu sh ( 'export', {value: data.dealer_userid, метка: data.user_displayname, прозвище: data.user_nicename, invid: data.dealer_invid, дата: дата});