Каким будет рекомендуемый способ реализации суб-навигации во всплывающем окне страницы в проекте Next.js?

Я работаю над проектом Next.js. На некоторых страницах мне нужно отображать всплывающее окно чата, которое само по себе состоит из нескольких подстраниц: страницы регистрации пользователя, страницы разговора, ..., поэтому мне нужно иметь возможность перемещаться внутри этого всплывающего окна. Я не думаю, что мне нужно менять URL-адрес при навигации внутри всплывающего окна, возможно, должен быть просто индикатор (в URL-адресе), всплывающее окно погоды открыто или нет.

Каким будет лучший / рекомендуемый способ реализовать такую ​​суб-навигацию?


reactjs javascript next.js react-router-dom react-router
person Matej Ukmar    schedule 06.07.2020    source источник
comment
Существует множество возможных реализаций: 1. Использование строки запроса в URL-адресе 2. Использование шаблона хэшбэга (#! Sub-nav = state1) 3. Не отражать состояние в URL-адресе. Выберите один.   -  person felixmosh    schedule 06.07.2020

Ответы (1)


arrow_upward
1
arrow_downward

Используйте неглубокую трассировку

//... shortened, import router etc.
  useEffect(() => {
    router.push('/?chatopen=true', undefined, { shallow: true })
  }, [])

  useEffect(() => {
   // You will receive value of chatopen here
  }, [router.query.chatopen])

Вам нужно будет сделать это на страницах, на которых вам нужна функциональность.

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

Подробнее здесь: https://nextjs.org/docs/routing/shallow-routing

person Ramakay    schedule 06.07.2020
comment
Выглядит интересно, спасибо, посмотрю. - person Matej Ukmar; 09.07.2020