Маршрутизация на разные страницы в зависимости от условия

Итак, мы создаем разные страницы для нашего приложения, и нам нужно каждый раз переходить с одной страницы на другую. Мы работаем над Next.js.

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

Теперь, как я вижу, использование параметра запроса становится немного сложнее по мере роста приложения.

Я хотел бы знать, есть ли какой-либо другой способ маршрутизации, при котором мы можем пропустить использование параметра запроса и при этом сохранить состояние.

Если параметр запроса отправляется на несколько подстраниц, вы можете использовать localstorage (или sessiontorage). При монтировании страницы вы можете получить значения внутри локального хранилища и установить их на этапе гидратации.

Raphael Escrig 23.11.2022 09:47

@RaphaelEscrig использует локальное хранилище безопасно и эффективно? Чем отличается от лица то, что мы не увидим параметры запроса в URL-адресе?

Mohit Chauhan 23.11.2022 10:40

Использование localstorage так же безопасно, как и параметры запроса. С localstorage вам будет проще отправлять значения на подмаршруты. Если у вас есть только один или два подмаршрута, параметры запроса в порядке, но с большим количеством подмаршрутов логика/обслуживаемость кода может раздражать (особенно потому, что вы хотите всегда отправлять одни и те же параметры запроса на подмаршруты). С помощью localstorage вы также можете создать собственный хук для получения значений/обновления значения в нескольких компонентах.

Raphael Escrig 23.11.2022 10:47

@RaphaelEscrig понял... можешь написать ответ... я одобрю

Mohit Chauhan 23.11.2022 12:12
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
69
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Если параметр запроса отправляется на несколько подстраниц, вы можете использовать localstorage (или sessiontorage). При монтировании страницы вы можете получить значения внутри локального хранилища и установить их на этапе гидратации.

Использование localstorage так же безопасно, как и параметры запроса. С localstorage вам будет проще отправлять значения на подмаршруты. Если у вас есть только один или два подмаршрута, параметры запроса в порядке, но с большим количеством подмаршрутов логика/обслуживаемость кода может раздражать (особенно потому, что вы хотите всегда отправлять одни и те же параметры запроса на подмаршруты). С помощью localstorage вы также можете создать собственный хук для получения значений/обновления значения в нескольких компонентах.

Напоминаем, что не храните конфиденциальные данные в локальном хранилище. Я рекомендую вам также прочитать новую систему маршрутизации Next.js! (критические изменения) Читать здесь.

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