Определяет, попал ли пользователь на текущий маршрут, используя history.GoBack()

#reactjs

Вопрос:

У меня есть приложение, в котором есть список сотрудников. Когда пользователь нажимает на сотрудника, приложение переходит на страницу сведений о сотруднике. На странице сведений есть кнопка, которая выполняет history.goBack() , которая приведет пользователя к списку сотрудников, но это не единственный способ перейти к списку сотрудников в приложении.

Мне нужно выполнить определенную логику только тогда, когда пользователь попал в список сотрудников, используя history.goBack (логика НЕ должна выполняться, когда пользователь попадает в список сотрудников, например, используя history.push ).

Как я могу определить, попал ли пользователь туда, используя history.GoBack() в компоненте списка сотрудников?

1. Похоже, что History API не разрешает доступ к ранее посещенным страницам по соображениям безопасности. Единственный вариант, который я могу придумать, — это изменить кнопку, которая выполняет history.goBack() ссылку со специальным параметром запроса (например /employees/list?returning=true ), и запустить необходимую логику с помощью returning=true параметра запроса. Затем вы можете заменить текущий URL-адрес через History API, чтобы избавиться от параметра ?returning=true запроса.

2. Вы также можете использовать cookies / localStorage / sessionStorage для сохранения флага при нажатии кнопки и необходимости выполнения логики.

Ответ №1:

Предположительно, вам также необходимо запустить эту логику, когда пользователь нажимает встроенную в браузере кнопку «назад», поскольку это функционально идентично? Короткий ответ: вы не можете. Браузер не имеет встроенных событий для направления навигации по дизайну по соображениям безопасности.

Вместо этого вы можете создать HOC или Hook, который вызывает history.listen и постоянно обновляет некоторую часть состояния с предыдущим местоположением. Затем предоставьте его в качестве контекста для соответствующих компонентов и сравните его, где это необходимо, с текущим местоположением.

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

Ответ №2:

Вы можете использовать history.action prop . After goBack — это POP while после замены — это PUSH or REPLACE .

https://reactrouter.com/web/api/history

Обратите внимание, что action он также POP находится при первой загрузке. Если вы хотите игнорировать этот случай, объедините его с history.length > 1 .

Подводя итог:

 const isBack = history.action === "POP" amp;amp; history.length > 1;

https://codesandbox.io/s/react-router-dom-identify-goback-1po29?file=/src/pages/Project.js
(Нажмите «О программе» и «Назад»)

1. Это не работает, потому что прямая навигация также является POP изменением состояния.

2. history.length также может быть> 1 при перезагрузке страницы.

3. Как? Afaik, стек истории запускается при перезагрузке.