How to Remove Query Params in NextJS Without Refreshing the Page

Jasser Mark Arioste

Jasser Mark Arioste

How to Remove Query Params in NextJS Without Refreshing the Page

In this article, you'll learn how to remove query params in NextJS without refreshing the page. 

The Problem #

Sometimes we need to remove query parameters after rendering the page. With shallow routing, we can remove the query params of the current page.

Suppose you have a page route pages/[slug].tsx and you want to remove query parameters like utm_source, utm_referer, and other tracking parameters.

The Solution #

Use router.push with shallow true will passing in the query params from the dynamic route.

// pages/[slug].tsx
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
const DynamicMarketingPage = () => {
  const router = useRouter();
  const query = router.query;
  useEffect(() => {
    if (router.isReady) {
          query: {
            slug: query.slug,
        { shallow: true }
      const utm_source = query.utm_source;
      if (utm_source) {
        // do data tracking
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [router.isReady]);
  return <div>Dynamic Marketing Page</div>;
export default DynamicMarketingPage;


Line 8: We wait for the router to be ready since router.query will be undefined if we read it when the router is not ready.

Lines 11-13: We use router.push without the pathname, this will tell NextJS that we want to push to the same page. And we pass query.slug since our page is a dynamic route and the filename is [slug].tsx

Lines 16: We use shallow: true so that NextJS will not refresh the page. this only works if you're pushing to the current page.

Line 18: Do anything you want with the query parameters. You can save it to a state or do some data tracking.

Full Code #

I created a GitHub Repository where you can access the code:

Demo #

Check this URL for the demo Observe the network tab and the address bar and you'll see that the url is removed without refreshing the page.

Conclusion #

We learned how to remove the query params without refreshing the page. Passing URL options to router.push is very handy when you want to push to the same page.

If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on Twitter.

Resources #

Share this post!

Related Posts


This content may contain links to products, software and services. Please assume all such links are affiliate links which may result in my earning commissions and fees.
As an Amazon Associate, I earn from qualifying purchases. This means that whenever you buy a product on Amazon from a link on our site, we receive a small percentage of its price at no extra cost to you. This helps us continue to provide valuable content and reviews to you. Thank you for your support!
Donate to ReactHustle