Блог

Я использую ванильный React с react-router для создания простого СПА-центра с основными деталями. На странице списка, которую я использовал push(*route*) для перехода пользователя к подробному представлению, затем вызывается кнопка возврата в подробном представлении goBack() для перехода пользователя к просмотру списка.

Причина, по которой я использую goBack() функцию вместо push('/list') , заключается в том, чтобы позволить пользователю вернуться к просмотру списка без потери параметров фильтрации / разбивки на страницы (например, /list/1/10?q = abc).

Проблема, с которой я сталкиваюсь, заключается в том, что если пользователь запустил браузер, например, из Google, затем скопируйте / вставьте URL-адрес для подробного просмотра в адресную строку, goBack() функция вернет их в Google, поскольку Google был его последней историей.

Есть ли способ проверить goBack() назначение и принять решение о выполнении goBack() в зависимости от того, выйдет ли пользователь из приложения?

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

Состояние поддерживается только в пределах текущей области приложения. Копирование вставки URL на другую вкладку браузера приведет к потере этого состояния.

Пример: Переход со страницы списка на страницу сведений

 router.push({
    pathname: '/users/12',
    query: { modal: true },
    state: { fromDashboard: true }
})
  

Подробная страница:

 if (this.props.location.state amp;amp; this.props.location.state.params) {
    navigateBackUsingParams(this.props.location.state.params);
} else {
    navigateBackWithHardcodedUrl();
}