React-router-dom, как использовать функцию goBack без использования истории

Как я могу имитировать нажатие кнопки «назад» в браузере из кода?

const history = useHistory()
history.goBack()

Я знаю, что я тоже могу это сделать, но, как я понял, в новых версиях react-router-dom useHistory был изменен на useNavigate, в котором нет функции goBack(). Как я могу вернуться на последнюю страницу, не откатывая react-router-dom?

Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
React-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
1
0
38
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

...in the new versions of react-router-domuseHistory was changed to useNavigate, which has no goBack() function.

Это не совсем точно. В react-router-dom@6 крючок useHistory был заменены к крючку useNavigate. Хук useNavigate возвращает navigate функцию вместоhistory объект с методами навигации.

использоватьNavigate

declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: any }
  ): void;
  (delta: number): void;
}

В дальнейшем

The navigate function has two signatures:

  • Either pass a To value (same type as ) with an optional second { replace, state } arg or
  • Pass the delta you want to go in the history stack. For example, navigate(-1) is equivalent to hitting the back button.

Вы хотите использовать аргумент delta. Если вы помните из RRDv4/5, что history.goBack() эквивалентно history.go(-1).

v4 история

// Go back to the previous history entry. The following
// two lines are synonymous.
history.go(-1);
history.goBack();

Решение

How can I go back to the last page without rolling back react-router-dom?

В react-router-dom@6 выдать обратную навигацию, т.е. POP:

const navigate = useNavigate();

navigate(-1);

Другие вопросы по теме