Что делает свойство replace элемента <Navigate>? Кроме того, что такое «стек истории»?

Я вижу, что «стек истории» часто упоминается, когда речь идет о перенаправлении. Раньше это был доступный объект в react-router-dom v5, но теперь это неявный объект в v6. То, что я представляю, представляет собой серию веб-страниц в стеке, причем страница наверху — это та, которая в данный момент отображается.

ГОЛОВА { ...page_2 <------ Текущая страница ...Страница 1 ...страница_0 } ХВОСТ

Это правильная визуализация стека истории?

Меня смущает эта статья о навигации, в которой говорится, что свойство replace навигации «заменяет текущую запись в стеке, а не добавляет новую».

Итак, я понимаю, что если бы я хотел перенаправить с текущей страницы (page_2), скажем, на страницу_0, и я НЕ должен был включать поддержку замены, произошло бы следующее:

ГОЛОВА { ...page_0 <------ Текущая страница ...page_2 <------ Прошлая страница ...Страница 1 ...страница_0 } ХВОСТ

Принимая во внимание, что если бы я ДЕЙСТВИТЕЛЬНО включил поддержку замены, это произошло бы:

ГОЛОВА { ...page_2 <------ Прошлая страница ...Страница 1 ...page_0 <------ Текущая страница } ХВОСТ

Это точное объяснение происходящего? Я провел несколько экспериментов с <Navigate> с заменой и без нее, и я не заметил каких-либо заметных эффектов на функциональность. Что произойдет, если я никогда не включу реквизит замены?

Обычно вам следует использовать реквизит замены, если вы хотите перенаправить и сделать так, чтобы кнопка «Назад» не приводила человека на страницу, с которой он был перенаправлен. Обычно используется при перенаправлении из-за аутентификации и т. д.

super 21.11.2022 01:21
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
1
1
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Что делает свойство replace <Navigate>?

Свойство replace в компоненте Navigate используется для рендеринга декларативного перенаправления. Другими словами, он вызывает действие навигации REPLACE вместо действия PUSH.

История.replaceState() Метод History.replaceState() изменяет текущую историю запись, заменяя ее объектом состояния и URL-адресом, переданным в методе параметры. Этот метод особенно полезен, когда вы хотите обновить объект состояния или URL-адрес текущей записи истории в ответ на некоторое действие пользователя.
История.pushState() В HTML-документе метод history.pushState() добавляет запись в стек истории сеансов браузера.

Достаточно вашего визуального представления/мысленной модели «стека истории».

Кроме того, что такое «стек истории»?

Я провел несколько экспериментов с <Navigate> с и без replace проп, и я не заметил каких-либо заметных эффектов функциональность. Что произойдет, если я никогда не включу реквизит замены?

Перенаправления обычно используются в потоках навигации пользовательского интерфейса, когда вы не хотите, чтобы пользователь возвращался на страницу, к которой он не должен обращаться, таким образом или в то время, когда вы не хотите, чтобы к ней обращались.

Примеры:

Пример потока аутентификации:

интерфейс Действие Стек истории Путь Назад Расположение 0 исходный ["/"]"/" 1 Перейти к защищенному маршруту "/foo" НАЖМИТЕ "/foo" ["/", "/foo"]"/foo""/" 2 Перенаправить для аутентификации ЗАМЕНИТЬ "/логин" ["/", "/login"]"/login""/" 3 Аутентификация прошла успешно, перенаправить обратно ЗАМЕНИТЬ "/foo" ["/", "/foo"]"/foo""/"

Если бы мы использовали все действия PUSH, стек истории имел бы вид ["/", "/foo", "/login", "/foo"]. После успешной аутентификации, если пользователь выполнит обратную навигацию, он вернется на страницу входа вместо домашней страницы, на которой он находился до перехода на страницу Foo.

Пример многоэтапного потока форм:

интерфейс Действие Стек истории Путь Назад Расположение 0 исходный ["/"]"/" 1 Перейти к процессу регистрации "/register" НАЖМИТЕ "/регистр/1" ["/", "/register/1"]"/register/1""/" 2 Перейти к шагу 2 ЗАМЕНИТЬ "/регистр/2" ["/", "/register/2"]"/register/2""/" 3 Перейти к шагу 3 ЗАМЕНИТЬ "/регистр/3" ["/", "/register/3"]"/register/3""/" 4 Ой, ошиблись, вернитесь к шагу 2 ЗАМЕНИТЬ "/регистр/2" ["/", "/register/2"]"/register/2""/" 5 Перейти к шагу 3 ЗАМЕНИТЬ "/регистр/3" ["/", "/register/3"]"/register/3""/" 6 Завершить регистрацию, перейти на страницу приветствия ЗАМЕНИТЬ "/добро пожаловать" ["/", "/welcome"]"/welcome""/"

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

Управляя навигацией «вперед», мы контролируем местоположение «навигации назад». Пользователь не может случайно вернуться в середину потока пользовательского интерфейса.

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