Change URl without page refresh NEXT.JS

Question

I am developing a ecommerce store using NEXT.JS and Redux. So in product listing page, I have sorting select dropdown with Price Low to High, Price High to Low and New Arrivals. Upon selecting this option, I want to change the URL without page refresh and API call should occure. I have tried using below code, but it is not working and page is reloading.

function sortBy(value) {
    router.replace({
        pathname: '/products/'+slug,
        query: { sort: value }
    })

    dispatch(fetchproducts(slug, sort));
}

The above code just refresh the current page and appending sort param to URL.

So is it possible to do it without page refresh like in Flipkart.

subashMahapatra · Accepted Answer · 2020-07-11 04:12:25Z

116

With the help of shallow-routing change of URL without doing a page reload is possible. It can be enabled by passing explicit option object as third argument to Router.push, i.e { shallow: true }

From the docs

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.

For example, this how you would update the query param sortBy for pathname /products with the help of shallow-routing.

Router.push({
  pathname: '/products',
  query: { sortBy: 'price' }
}, 
undefined, { shallow: true }
)

But there are a few caveats It is not possible to do shallow-routing between different pages, it works only for same page URL changes. See the caveat section for more details.

For example, you can update a query param for page /product page, but it won't be possible if you try to do shallow-routing from /product to /product/[slug] because they are two distinct pages.

// page will reload because shallow-routing not possible between the pages
Router.push('/product', '/product/some-product?sortBy=price', { shallow: true })

answered Jul 11, 2020 at 4:12

subashMahapatra

6,8772 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jithin Varghese Over a year ago

I just want to add ?sort=3 to URL. Current URL is http://localhost:3000/products/dfhdf/sgsdg?sort=1. But still the page is reloading. I have used const router = useRouter().

subashMahapatra Over a year ago

Then you can use router.push. Pass the first argument and second argument as is and provide the third argument as on object with option shallow as true { shallow: true}. Remember it will only work same page URL changes.

Jithin Varghese Over a year ago

router.push('/products/dfhdf?sort=1', '/products/dfhdf?sort=1', { shallow: true}). Not working, URL is same. Just added ?sort=1.

subashMahapatra Over a year ago

I suspect the dfhdf part is a route param for a dynamic route. And the page looks something like pages/products/[slug].js in file system. So you should be router.push should look something like this router.push('/products/[slug]?sort=1', '/products/dfhdf?sort=1', { shallow: true}

Jithin Varghese Over a year ago

Yes. That did the trick. It is a dynamic route [...slug].js. Thanks for the response.

|

Michael Almpertis · Accepted Answer · 2020-10-13 15:07:29Z

23

Example: you have a folder like: posts/[id].js and your url is like http://something.com/posts/123

You want to add a query param that will not refresh the page and your url will be like: http://something.com/posts/123?param=ok

all you need to do is:

const postId = 123;
const param = 'ok';
router.push(
    {
      pathname: `/posts/[id]`,
      query: {
        postId,
        param
      }
    },
    `/posts/${postId}?param=${param}`,
    {shallow: true}
);

answered Oct 13, 2020 at 15:07

Michael Almpertis

2312 silver badges3 bronze badges

Comments

Kris Kratz · Accepted Answer · 2023-11-15 22:13:43Z

5

This worked for me. It's easier than useRouter but fewer options. Gives me an anchor link which is what I needed. Read more in the NextJS docs

My [category].js has a fetch call in a useEffect hook, and router picks up the URL parameters, makes the call, and populates the data. The page doesn't refresh.

function createSortLink(sortBy) {

    const url = new URL('https://example.com/products/[category].js');
    url.searchParams.set('sortBy', sortBy);

    return (
        <Link 
          href={url}
          shallow={true}
          >
          {name}
        </Link>
        }
    )
}

edited Nov 15, 2023 at 22:13

answered Mar 24, 2023 at 2:43

Kris Kratz

812 silver badges4 bronze badges

2 Comments

ColdDarkness Over a year ago

Can you explain how do you set searchParams field on a string? I dont get how it works

Kris Kratz Over a year ago

@ColdDarkness Good point. It needs to be a URL object. I updated my answer. Thank you.

ahuemmer · Accepted Answer · 2025-03-04 19:33:28Z

1

for anyone using appRouter (next.js 13+), use window.history.replaceState instead.

from the docs:

Next.js allows you to use the native window.history.pushState and window.history.replaceState methods to update the browser's history stack without reloading the page.

window.history.replaceState({}, '', `/products?sort=xxx`)

edited Mar 4 at 19:33

ahuemmer

2,11717 gold badges30 silver badges38 bronze badges

answered Mar 4 at 9:58

gigigimay

213 bronze badges

Comments

Herus · Accepted Answer · 2024-05-05 16:41:14Z

-1

for guys who uses next.js 14 or 13 all you need is add scroll param to you code like this

router.push('/your route' + '?' + 'your query', {scroll : false})

answered May 5, 2024 at 16:41

Herus

376 bronze badges

1 Comment

Blaženko Karešin Over a year ago

Thank you! This solved it for me. For some reason, shallow: true didn't help, pages would always jump to top on params (filters in URL) change, perhaps because we have a lot of middleware for multilingual URLs... but scroll arg fixed it

Collectives™ on Stack Overflow

Change URl without page refresh NEXT.JS

5 Answers 5

8 Comments

Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related