React hooks - remove from react-router location state when we refresh page

user_10654327 0
Viewed 3575

When I am entering one page of the app I pass data through location state using react-router. Then I access it via location.state.myDataObject. When I refresh the page it is still there, while I would like it to be empty. Here's what I've try to use:

  const resetLocation = () => {
    history.replace({
      ...location,
      state: undefined,
    });
  };

  useEffect(() => {
    window.addEventListener('onbeforeunload', resetLocation);
  }, []);

Or adding it to unmount action within useEffect but I guess it is not called when refreshing the page:

  useEffect(() => {
    return function cleanLocationState() {
      history.replace({
        ...this.props.location,
        state: undefined,
      });
    };
  }, []);
react-router react-hooks reactjs
4 Answers

I think this is the desired behavior of react router. If you want to reset the state then you need to do something like

import React, { useEffect, useCallback } from "react";
import { useLocation, useHistory } from "react-router-dom";

function Home() {
  const location = useLocation();
  const history = useHistory();
  const replaceHistory = useCallback(() => {
    history.replace({ ...location, state: undefined });
  }, [history]);

  useEffect(() => {
    window.addEventListener("beforeunload", () => replaceHistory);
    return () => {
      window.removeEventListener("beforeunload", replaceHistory);
    };
  }, []);

  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

export default Home;

Working example

user_41022290

How about you try the contrary? Store the value on component did mound and delete it from the location. I'm not sure that this is the prettiest solution, but i guess it's the easiest

const [state,setState]=useState();

useEffect(()=>{
  setState(location.state);
  location.state=undefined;
}, [location])

user_109093170

The default behavior of the react-router will not save the history state after refresh the page so we need to know more about your code to really solve this issue. However, if the state do save, byour first attempt seem to have some flaw by using the history and location of window instead from the props.

function Page(props){

  useEffect(() => {
    const unloadFunc = () => {
      //use the history and the location from the props instead of window
      props.history.replace({
        ...props.location,
        state: undefined,
      });
    }
    window.addEventListener('onbeforeunload',unloadFunc);
    return ()=>{
        window.removeEventListener('onbeforeunload' unloadFunc);     
      //make history and location as the dependencies of the hook
  }, [props.history, props.location]);

  return <div></div>
}
user_105377200

Try this way:

import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";

function Home() {
  const history = useHistory();

  function replaceHistory(e) {
    if (e) {
      e.preventDefault();

      delete e.returnValue;
    }

    history.replace({ ...history.location, state: undefined });
  }

  console.log("history", history.location);

  useEffect(() => {
    window.addEventListener("beforeunload", () => replaceHistory);
    return () => {
      // Reset Location state if we leave this page
      replaceHistory();
      window.removeEventListener("beforeunload", replaceHistory);
    };
  }, []);

  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

export default Home;

CodesandBox Demo

user_54564760
Related