diff --git a/README.md b/README.md index 895a98f..cd4aee6 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud). -_975 TILs and counting..._ +_976 TILs and counting..._ --- @@ -443,6 +443,7 @@ _975 TILs and counting..._ ### Next.js - [Define URL Redirects In The Next Config](nextjs/define-url-redirects-in-the-next-config.md) +- [Remove A Query Param From The URL](nextjs/remove-a-query-param-from-the-url.md) ### Phoenix diff --git a/nextjs/remove-a-query-param-from-the-url.md b/nextjs/remove-a-query-param-from-the-url.md new file mode 100644 index 0000000..e9d0514 --- /dev/null +++ b/nextjs/remove-a-query-param-from-the-url.md @@ -0,0 +1,50 @@ +# Remove A Query Param From The URL + +Let's say you have a Next.js app. Sometimes users visit the app with special +query params. You want to extract the value of those query params, do something +with them, and then remove them from the URL. + +This can be done with +[`next/router`](https://nextjs.org/docs/api-reference/next/router). + +Let's say this component loads while the app URL is `/home?code=123`. + +```javascript +import React, { useEffect } from "react"; +import {useRouter} from "next/router"; + +function SomeComponent() { + const router = useRouter(); + + useEffect(() => { + // extract the value from the query params + const { code, ...updatedQuery } = router.query; + + if (!!code) { + // do something with the extract query param + doSomethingWithCode(code); + + // create an updated router path object + const newPathObject = { + pathname: router.pathname, + query: updatedQuery + } + + // update the URL, without re-triggering data fetching + router.push(newPathObject, undefined, { shallow: true }); + } + }, []) + + return ( + ... + ); +} +``` + +After the mount, the URL will read `/home` and the code will have done +something with the code value. + +This is accomplished by destructuring the target query param apart from the +rest, constructing a new router path object with the rest of the query params, +and then pushing that route update _shallowly_ so that data doesn't get +refetched.