React hooks - 当我们刷新页面时从 react-router 位置状态中删除

Question

当我进入应用程序的一页时，我使用 react-router 通过位置状态传递数据。然后我通过location.state.myDataObject 访问它。当我刷新页面时它仍然存在，而我希望它是空的。这是我尝试使用的：

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

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

或将其添加到useEffect 内的unmount 操作中，但我猜刷新页面时不会调用它：

  useEffect(() => {
    return function cleanLocationState() {
      history.replace({
        ...this.props.location,
        state: undefined,
      });
    };
  }, []);

Answer 1

我认为这是反应路由器的期望行为。如果你想重置状态，那么你需要做类似的事情

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;

工作example

Answer 2

你试试相反的怎么样？将值存储在组件上并从该位置删除。我不确定这是不是最漂亮的解决方案，但我想这是最简单的

const [state,setState]=useState();

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

Answer 3

试试这个方法：

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

Answer 4

react-router 的默认行为在刷新页面后不会保存历史状态，所以我们需要更多地了解您的代码才能真正解决这个问题。但是，如果 state 确实保存了，我们的第一次尝试似乎有一些缺陷，即使用 window 的历史记录和位置而不是 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>
}