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

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.

CodePudding user response：

You Import use Navigate from react-router-dom

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

Like That Than make a variable like that

const navigate = useNavigate();

then Like

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

And You are done

CodePudding user response：

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 ( ... );
};