接下来 js: router.push 路由到目标 url 但重新加载它

Question

I have a page structure like

pages
     [re]
       login
          [slug.tsx]

From one of the rendered pages, http://localhost:3000/in/login/data1 on button click router.push is called,

router.push(`in/login/data2`, undefined, { locale });

As expected router.push routes to the target path with the updated view BUT it reloads the page clearing the redux store. Any pointer to why this is happening?

Note: The issue happens if I directly load http://localhost:3000/in/login/data1 in browser and on click on button to go to http://localhost:3000/in/login/data2 . But all works fine if go to http://localhost:3000/in/login/data1 from the home page http://localhost:3000/ by clicking on

<Link href="/in/login/data1">
</Link>

Answer 1

You need something called shallow routing. Shallow routing allows you to change route without page refresh. All you need to do is pass shallow true in your router.push function like this

router.push(`in/login/data2`, undefined, { shallow: true });