отреагировать на сохранение маршрута на странице перезагрузки - PullRequest
0 голосов
/ 17 октября 2019

Можно ли как-нибудь сохранить историю маршрутов при перезагрузке страницы и передать ее моему компоненту. Пример: - Я нахожусь на компоненте панели мониторинга со ссылкой "/", затем я перехожу к другому компоненту, используя ссылку "/ ab", затем я перехожу к другому компоненту, используя ссылку "/bcd".

Flow =" / "-> "/ ab" -> "/ bcd"

Теперь, когда я перезагружаю страницу, когда я нахожусь на "/ bcd", маршрутизатор не сохраняет старые маршруты. В результате я не могу вернуться к предыдущим компонентам / страницам. Как я могу вернуться к предыдущим компонентам даже после перезагрузки страницы?

Я использую HashRouter. и версия React-роутера 4.3.0

Ответы [ 2 ]

0 голосов
/ 17 октября 2019

Да, решение @babs будет использовать возможность браузера вернуться, чтобы просто вернуться на страницу, но у меня было аналогичное требование к вашей проблеме, когда мне нужно было отследить, откуда пользователь пришел в приложение, сохраняя его при перезагрузке страницы /освежает. Мы используем redux и имеем прослушиватель истории на маршрутизаторе, который отправляет «LOCATION_CHANGE» для каждой навигации.

Проблема заключалась в том, что он дает вам только часть истории и срабатывает после маршрут меняется, поэтому не было видно, откуда он был. Я создал редуктор истории, который просто сохраняет в состоянии очередь / стек последних N изменений в сочетании с набором селекторов, которые предоставляют приложению текущий (верхний) и предыдущий (верхний - 1) объекты местоположения / истории. Это потому, что, хотя история реагирующего маршрутизатора является изменяемым , он не обеспечивает все то, что вы ожидаете *.

Основной шаблон для прослушивания изменений:

// Listen for changes to the current location.
const unlisten = history.listen((location, action) => {
  // location is an object like window.location
  console.log(action, location.pathname, location.state);
});

Если вы не используете управление состоянием, такое как Redux, вы все равно можете использовать этот обратный вызов для хранения сортировки истории в вашем компоненте маршрута или компоненте корневого приложения, где вы создаете объект истории маршрутизатора. Передавайте в качестве подпорки детям, или используйте новую контекстную систему, или обновляйте и используйте redux, чтобы получить свою историю.

* MemoryHistory действительно предоставляет стек истории, к которому вы можете получить доступ

0 голосов
/ 17 октября 2019

Вы можете использовать следующую функцию, это не имеет никакого отношения к реагирующему маршрутизатору. Он просто использует логику от кнопки возврата браузера:

function goBack() { 
   window.history.back();
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...