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

Question

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,
      });
    };
  }, []);

Answer 1

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