Search code examples
reactjsreact-routernext.jsnext-router

Next.js Router.push() reloads page automatically

Is there a way to execute a Router.push() without reloading the page using Next.js?

I am using a [...all].js main file for a page that based on the url renders different components, but i want to be able to move between them without triggering a full page reload - it is a multi-step form.

In other words, I want to be able to move between the steps of the form by also updating the URL from 'form/1' to 'form/2'

Solution

  • Set option shallow to true to avoid page refresh

    router.push('/?step=2', null, { shallow: true })