Как правильно передать параметры между URL-адресами, используя реагирующий маршрутизатор?

Question

С добавлением в useParams, useHistory и useLocation в React Router v5.1 вместе с изменяющимися соглашениями о кодировании, включенными с помощью hook-точек реакции и функциональных компонентов, становится непонятным, пытаясь найти предполагаемый способ использования современной версии реагирования. router.

Как программировать навигацию с реагирующим маршрутизатором, как правильно передавать параметры между разными URL?

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

history.push("/home"); //history is defined as the return value of useHistory() from react-router-dom

Как мне правильно передать некоторые свойств component_a для другого компонента с именем component_b ? Компонент_b отображается следующим образом:

<Route path="/home" component={component_b}/>

Мне известно, что history.pu sh () принимает второй параметр [state]. Однако я не видел никаких примеров в документах. Я также не смог найти его описание.

Я также знаю о useParams (), но что, если слишком много переменных, чтобы пройти через сам URL?

Answer 1

Есть

хуков, поэтому вам больше не нужно использовать HO C withRouter, чтобы получить то, что вам нужно от маршрутизатора.

через URL, вы должны передавать только те данные, которые изначально принадлежат URL (например, имя маршрута, идентификатор, параметры поиска и т. д. c)

с состоянием, которое вы можете передать в теории, что хотите, но на практике вы, вероятно, передадите несколько меньших кусков данных (например, флаги, идентификатор)

с роутером v5 также существует новый способ построения Маршрута

<Route path="/home">
  <YourComponent prop1 prop2 />
</Route>

и там вы определяете все реквизиты вашего компонента

для всего остального, что вам следует использовать в магазине приложений например, Redux, MobX или Context, которые вы обновите до своего history.push("/home"); и получите к нему доступ, как только войдете в <YourComponent />