Menu
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'
496
asked Apr 09 '20 20:04
router. push by default doesn't trigger a page reload · Issue #21787 · vercel/next.
Shallow routing allows you to change the URL without running data fetching methods again, that includes getServerSideProps , getStaticProps , and getInitialProps . You'll receive the updated pathname and the query via the router object (added by useRouter or withRouter ), without losing state.
react-router-dom allows us to navigate through different pages on our app with/without refreshing the entire component. By default, BrowserRouter in react-router-dom will not refresh the entire page.
Set option shallow to true to avoid page refresh
router.push('/?step=2', null, { shallow: true })
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With