How to remove query param with react hooks?

Question

I know we can replace query params in component based classes doing something along the lines of:

  componentDidMount() {       
    const { location, replace } = this.props;   

    const queryParams = new URLSearchParams(location.search);   
    if (queryParams.has('error')) { 
      this.setError(    
        'There was a problem.'  
      );    
      queryParams.delete('error');  
      replace({ 
        search: queryParams.toString(), 
      });   
    }   
  }

Is there a way to do it with react hooks in a functional component?

Ajeet Shah · Accepted Answer · 2022-10-08 14:40:41Z

83

For React Router V6 and above, see the answer below.

Original Answer:

Yes, you can use useHistory & useLocation hooks from react-router:


import React, { useState, useEffect } from 'react'
import { useHistory, useLocation } from 'react-router-dom'

export default function Foo() {
  const [error, setError] = useState('')

  const location = useLocation()
  const history = useHistory()

  useEffect(() => {
    const queryParams = new URLSearchParams(location.search)
    
    if (queryParams.has('error')) {
      setError('There was a problem.')
      queryParams.delete('error')
      history.replace({
        search: queryParams.toString(),
      })
    }
  }, [])

  return (
    <>Component</>
  )
}

As useHistory() returns history object which has replace function which can be used to replace the current entry on the history stack.

And useLocation() returns location object which has search property containing the URL query string e.g. ?error=occurred&foo=bar" which can be converted into object using URLSearchParams API (which is not supported in IE).

edited Oct 8, 2022 at 14:40

answered May 26, 2020 at 22:29

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

navedrizv Over a year ago

This won't work with Class Component, how to we handle it there.

Ajeet Shah Over a year ago

In a class component, replace useEffect with componentDidMount, useState with this.state, useHistory with this.props.history + withRouter HOC. That should work with class component.

oyalhi Over a year ago

In case anyone is interested, to be used with function components I've created a library useClearParams github.com/oyalhi/use-clear-params#readme

alerya Over a year ago

useNavigate in react-router-dom v6

sr9yar Over a year ago

I've used this approach to update a search param based on user selection on the page, but this causes page reload, which is completely unnecessary in my case ...

Vaelyr · Accepted Answer · 2022-08-14 16:49:17Z

46

Use useSearchParams hook.

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

export const App =() => {
  const [searchParams, setSearchParams] = useSearchParams();

  const removeErrorParam = () => {
    if (searchParams.has('error')) {
      searchParams.delete('error');
      setSearchParams(searchParams);
    }
  }

  return <button onClick={removeErrorParam}>Remove error param</button>
}

answered Aug 14, 2022 at 16:49

Vaelyr

3,1942 gold badges24 silver badges38 bronze badges

5 Comments

Julix Over a year ago

Note that this doesn't remove it from the url (which might be a little confusing depending on the use case) - useHistory is no more in v6 - so some variation of useNavigation would probably be needed... know how to navigate without triggering a re-render? If I recall last time I needed prevention of navigation I messed with navigator from UNSAFE_NavigationContext

Julix Over a year ago

stackoverflow.com/a/70700037/2848941 hmm .... seems extra navigation shouldn't be necessary, as long as it's in a useEffect?

KeatsKelleher Over a year ago

Added this to my useEffect hook and it works like a charm.

Jordan Mackie Over a year ago

is this still in react router v6?

huntzinger92 Over a year ago

This removes the query param from the URL in my app (react-router v6.10) without using useNavigate or useEffect

Collectives™ on Stack Overflow

How to remove query param with react hooks?

2 Answers 2

5 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related