How set, get and delete URL Params using React

#react #typescript #nextjs #web

Setting the URL Params:

import { useSearchParams } from 'react-router-dom'

//startar the variable params
const [searchParams, setSearchParams] = useSearchParams()

setSearchParams((state) => {
  state.set('order', '123')

  return state
})

Geting URL Params:

Accessing the route: http://localhost:5173/dashboard?order=123

We get this param like at example bellow:

import { useSearchParams } from 'react-router-dom'

//startar the variable params
const [searchParams, setSearchParams] = useSearchParams()

//Get the param defined
const orderId = searchParams.get('order')

Deleting URL Params:

import { useSearchParams } from 'react-router-dom'

//startar the variable params
const [searchParams, setSearchParams] = useSearchParams()

//Delete the param order
setSearchParams((state) => {
  state.delete('order')

  return state
})