'NEXT JS - How to remove Query Params

How can I remove or update query params without refreshing the page in Next JS (React)?

  1. The user is on the URL /about?login=success&something=yes
  2. Click a button and removes ?login=success&something=yes from the URL without refreshing the page. The URL after clicking the button will be /about

How can I achieve it?

As mentioned in this thread, I know that is possible to remove query params or query strings with Router. But, useLocation and useHistory are not avaliable on next/router.

reactjsnext.jsnext-routersql-servertsql


Solution 1:[1]

You can use next/router to remove or update the query params in the URL.

const router = useRouter();

router.replace('/about', undefined, { shallow: true });

Use replace to prevent adding a new URL entry into the history (otherwise just use push), and shallow: true allows you to change the URL without running data fetching methods. This will cause a re-render but will not refresh the page per se.

Solution 2:[2]

my solution to similiar problem of mine is this:

push(`${asPath.split('?')[0]}?comp=${id}`);

or if you want to have reusable function:


function delQuery(asPath) {
  return asPath.split('?')[0]
}

...
const {push, asPath} = useRouter()

push(`${delQuery(asPath)}?comp=${id}`);

Solution 3:[3]

If you want remove single or multiple params from query,

const router = useRouter();

/**
 * If removeList is empty, the function removes all params from url.
 * @param {*} router 
 * @param {*} removeList 
 */
const removeQueryParamsFromRouter = (router, removeList = []) => {
    if (removeList.length > 0) {
        removeList.forEach((param) => delete router.query[param]);
    } else {
        // Remove all
        Object.keys(object).forEach((param) => delete object[param]);
    }
    router.replace(
        {
            pathname: router.pathname,
            query: router.query
        },
        undefined,
        /**
         * Do not refresh the page
         */
        { shallow: true }
    );
};

const anyFunction = () => {
    // "/about?firstParam=5&secondParam=10"
    removeQueryParamsFromRouter(router, ['myParam']);
    // "/about?secondParam=10"
};

Solution 4:[4]

Nextjs has useRouter hook which can be used to changed url programmatically. Link to the docs.

Solution 5:[5]

import {NextRouter} from 'next/router'

export const removeQueryParams = (
  router: NextRouter,
  paramsToRemove: Array<string> = []
) => {
  if (paramsToRemove.length > 0) {
    paramsToRemove.forEach((param) => delete router.query[param])
  } else {
    // Remove all query parameters
    Object.keys(router.query).forEach((param) => delete router.query[param])
  }
  router.replace(
    {
      pathname: router.pathname,
      query: router.query,
    },
    undefined,
    /**
     * Do not refresh the page when the query params are removed
     */
    {shallow: true}
  )
}
const anyFunction = () => {
    // "/about?firstParam=5&secondParam=10"
    removeQueryParamsFromRouter(router, ['myParam']);
    // "/about?secondParam=10"
};

Original Answer

The original answer mentioned here throws an error as the object is undefined, also it is the typescript version of it.

Solution 6:[6]

You can simply use "router.push" or "router.replace" with "shallow: true", this will remove the query param without reloading the page.

const router = useRouter();
router.replace('/about', undefined, { shallow: true });

Or if you want to delete single query then this quick and easy method will help you

eg. /about?login=success&something=yes

const router = useRouter();
// perform this inside function call or button click etc
delete router.query.something;
router.push(router)

now the updated route will be

/about?login=success

Solution 7:[7]

You can remove query param from router object by []:

const router = useRouter();
router.query.something = [];

Solution 8:[8]

Essentially there is no way to do this.

Best Solution: Computed Column

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 James Gunawan
Solution 3 Muhammet Can TONBUL
Solution 4 Jibin Thomas
Solution 5 Chindukuri Pavan
Solution 6 Gowdham PR
Solution 7 Hossein
Solution 8 cdickstein

Related Questions