Why does React Router v6 seem unable to remove query string param from URL?

Question

I have an app which sometimes is loaded with a query string param t.

At the start, I want the app to read this param if available and remove it from the URL.

On the root component, I am doing this:

    const [searchParams, setSearchParams] = useSearchParams();

    if (searchParams.has('t')) {
        const token = searchParams.get('t');
        if (token) {
            searchParams.delete('t');
            const newParams: {[key: string]: string} = {};
            searchParams.forEach((value: string, key: string) => {
                newParams[key] = value;
            });
            console.log('setting params: ');
            console.dir(newParams);
            setSearchParams(newParams);
            AuthController.setAccessToken(token);
        }
    }

I see that it correctly reads param t and the newParams object is empty or contains only the other parameters, but for some reason setSearchParams(newParams) seems to not be doing anything. Parameter t is still in the URL.

How I can have it remove this parameter from the URL?

when you say setSearchParams(newParams) all you are doing is updating state of the component. That won't touch the URL itself. I've done some thing similar w/v5 but since you are using v6 I prefer not to add it as an answer. But for v5, I used useHistory & my code was history.push({pathname: <base route>, search: stringify(currentParams),}); And, const currentParams = parse(window.location.search.replace("?", "")); — Sangeet Agarwal
– Sangeet Agarwal, Commented Jan 13, 2022 at 15:30
Ahh, got it.. yeah I dont know whats the equivalent on v6, the documentation is not clear on this. — Edy Bourne
– Edy Bourne, Commented Jan 13, 2022 at 15:30
useNavigate I think, but haven't had the chance to work w/v6. — Sangeet Agarwal
– Sangeet Agarwal, Commented Jan 13, 2022 at 15:31

Drew Reese · Accepted Answer · 2022-01-13 16:37:31Z

21

The setSearchParams updater function effectively is "navigate" but for only the queryString portion of the URL.

useSearchParams

Note:

The setSearchParams function works like navigate, but only for the search portion of the URL. Also note that the second arg to setSearchParams is the same type as the second arg to navigate.

You don't need to call navigate to update the queryString. The issue is doing this logic as an unintentional side-effect. Move all the logic into a useEffect hook and you'll find it works as you were expecting.

const [searchParams, setSearchParams] = useSearchParams();

useEffect(() => {
  if (searchParams.has("t")) {
    const token = searchParams.get("t");
    if (token) {
      searchParams.delete("t");
      console.log("setting params:", { searchParams: searchParams.toString() });
      console.dir(searchParams.toString());
      setSearchParams(searchParams);
    }
  }
}, []);

answered Jan 13, 2022 at 16:37

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

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

2 Comments

Peter Gerdes Over a year ago

It might be relevant to people who come here to note that you don't actually need to use the searchParams you got from the hook in setSearchParams. You can also just pass a newly instantiated URLSearchParams object (or an array of pairs) if you want to replace all the parameters.

Drew Reese Over a year ago

@PeterGerdes That is true, if you don't care to preserve any other existing queryString parameters you can just blow them away.

Edy Bourne · Accepted Answer · 2022-01-13 15:51:37Z

3

Got it to work!

This is what made the trick:

    const [searchParams, setSearchParams] = useSearchParams();
    const navigate = useNavigate();

    useEffect(() => {
        // remove the t parameter if it is present in the URL. This happens when we are redirected back from an OAuth
        // flow.
        if (searchParams.has('t')) {
            const token = searchParams.get('t');
            if (token) {
                searchParams.delete('t');
                const newParams: {[key: string]: string} = {};
                searchParams.forEach((value: string, key: string) => {
                    newParams[key] = value;
                });

                setSearchParams(newParams);
                navigate({
                    search: createSearchParams(newParams).toString(),
                }, {replace: true});

                AuthController.setAccessToken(token);
            }
        }

    }, [navigate, searchParams, setSearchParams]);

The code must be in useEffect and navigate must use the replace option. Now the param is removed.

answered Jan 13, 2022 at 15:51

Edy Bourne

6,30616 gold badges63 silver badges116 bronze badges

1 Comment

rodrigocfd Dec 23, 2024 at 12:29

In React Router 7, createSearchParams is not necessary. You can simply pass search: newParams.toString().

Collectives™ on Stack Overflow

Why does React Router v6 seem unable to remove query string param from URL?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related