Что делает свойство 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> с заменой и без нее, и я не заметил каких-либо заметных эффектов на функциональность. Что произойдет, если я никогда не включу реквизит замены?
Ответы 1
Что делает свойство replace <Navigate>?
Свойство replace в компоненте Navigate используется для рендеринга декларативного перенаправления. Другими словами, он вызывает действие навигации REPLACE вместо действия PUSH.
История.replaceState() Метод History.replaceState() изменяет текущую историю запись, заменяя ее объектом состояния и URL-адресом, переданным в методе параметры. Этот метод особенно полезен, когда вы хотите обновить объект состояния или URL-адрес текущей записи истории в ответ на некоторое действие пользователя.
История.pushState() В HTML-документе метод history.pushState() добавляет запись в стек истории сеансов браузера.
Достаточно вашего визуального представления/мысленной модели «стека истории».
Кроме того, что такое «стек истории»?
Я провел несколько экспериментов с <Navigate> с и без replace проп, и я не заметил каких-либо заметных эффектов функциональность. Что произойдет, если я никогда не включу реквизит замены?
Перенаправления обычно используются в потоках навигации пользовательского интерфейса, когда вы не хотите, чтобы пользователь возвращался на страницу, к которой он не должен обращаться, таким образом или в то время, когда вы не хотите, чтобы к ней обращались.
Примеры:
Пример потока аутентификации:
["/"]"/"
1
Перейти к защищенному маршруту "/foo"
НАЖМИТЕ "/foo"
["/", "/foo"]"/foo""/"
2
Перенаправить для аутентификации
ЗАМЕНИТЬ "/логин"
["/", "/login"]"/login""/"
3
Аутентификация прошла успешно, перенаправить обратно
ЗАМЕНИТЬ "/foo"
["/", "/foo"]"/foo""/"Если бы мы использовали все действия PUSH, стек истории имел бы вид ["/", "/foo", "/login", "/foo"]. После успешной аутентификации, если пользователь выполнит обратную навигацию, он вернется на страницу входа вместо домашней страницы, на которой он находился до перехода на страницу Foo.
Пример многоэтапного потока форм:
["/"]"/"
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""/"Обратите внимание, что в любой момент во время этого потока, если пользователь нажмет кнопку «Назад», он вернется на страницу, на которой он был до запуска потока. Это распространено в потоках регистрации или покупок в корзине, где вы хотите контролировать, где и как пользователь входит и выходит из потока.
Управляя навигацией «вперед», мы контролируем местоположение «навигации назад». Пользователь не может случайно вернуться в середину потока пользовательского интерфейса.
Обычно вам следует использовать реквизит замены, если вы хотите перенаправить и сделать так, чтобы кнопка «Назад» не приводила человека на страницу, с которой он был перенаправлен. Обычно используется при перенаправлении из-за аутентификации и т. д.