How to Remove Query Params in NextJS Without Refreshing the Page
Jasser Mark Arioste
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) { router.push( { query: { slug: query.slug, }, }, undefined, { shallow: true } ); const utm_source = query.utm_source; if (utm_source) { console.log(utm_source); // do data tracking } } // eslint-disable-next-line react-hooks/exhaustive-deps }, [router.isReady]); return <div>Dynamic Marketing Page</div>; }; export default DynamicMarketingPage;12345678910111213141516171819202122232425262728
Explanation
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: https://github.com/jmarioste/next-remove-query-params
Demo #
Check this URL for the demo https://next-remove-query-params.vercel.app/landing-page?utm_source=organic&utm_referer=xxx. 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.
