CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
jorj
jorj

Reputation: 113

How to update location.state in react-router v6?

I'm using react-router-dom v6. When using useNavigate like this:

let navigate = useNavigate();
navigate("/", {state: state});

I can access it by useLocation().location.state

My question is how to remove this state after i don't need it, for example in useEffect cleanup function.

Upvotes: 10

Views: 25687

Answers (4)

cypherfunc
cypherfunc

Reputation: 2659

I noticed the other answers cause the querystring to disappear, because they pass strings as navigates the first param. If you want to keep everything in the URL and just change the state, you can pass location as the first param.

const Component = () => {
  const location = useLocation();
  const navigate = useNavigate();

  ...

  useEffect(() => {
    if (shouldClearState) {
        // the options object does not have state defined, so it gets cleared
        navigate(location, { replace: true });
    }
  }, [location, navigate]);

  return ( ... );
};

This works because it matches the To interface, which takes the pathname, search, and hash. Note that state is not read off the first param, because it doesn't exist on To.

Upvotes: 1

Dmitry
Dmitry

Reputation: 1149

If you need to update the state, consider to use History APIs:

interface History {
    ...
    pushState(data: any, unused: string, url?: string | URL | null): void;
    replaceState(data: any, unused: string, url?: string | URL | null): void;
}

The entire history instance culd be reached via window.history. So, the answer to your question will be:

window.history.replaceState({}, 'my page');

I hope it will help to someone.

Upvotes: -1

Abdur Rahman Talha
Abdur Rahman Talha

Reputation: 9

You should import useNavigate from react-router-dom:

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

then make a variable:

const navigate = useNavigate();

then:

<button onClick={() => navigate('/')}><button>

And you are done.

Upvotes: 0

Drew Reese
Drew Reese

Reputation: 202706

My question is how to remove this state after I don't need it

You could read the passed route state into local component state and issue a redirect without state to the current path to clear out the state. This would prevent any back navigations to the page to retain any route state.

Example:

const Component = () => {
  const location = useLocation();
  const navigate = useNavigate();

  const [state] = useState(location.state || {}); // <-- cache state locally

  useEffect(() => {
    navigate(".", { replace: true }); // <-- redirect to current path w/o state
  }, [navigate]);

  return ( ... );
};

Edit how-to-update-location-state-in-react-router-v6

Upvotes: 16

Related Questions