What would be the recommended way to implement sub-navigation inside a page popup in Next.js project?

Question

I'm working on a Next.js project. On some of the pages I need to display a chat popup which itself is composed of several sub-pages: user registration page, conversation page, ..., so I need to be able to navigate inside of that popup. I don't think I'd need to change the URL when navigating inside the popup, maybe there should just be an indicator (in the url) weather popup is open or not.

What would be the best/recommended way to implement this kind of sub-navigation?

Answer 1

Use shallow routing

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

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

You will have to do these on the pages you need the functionality on.

Shallow routing lets you push paths without all of the nextjs lifecycle being triggered, its the fancy version of pushing an inline bookmark.

More here: https://nextjs.org/docs/routing/shallow-routing