有一种方法可以用React-Router v.7？

Question

目的是在用户离开页面之前保存表格。

在我们从v.5切换到

react-router

v.7之前，我们使用了

history

软件包，该软件包仅与

react-router

compation compation to仅到v.6.

。

我们在主组件中使用的代码与

history

软件包是：

const hist = createBrowserHistory();
hist.listen(({action, location}) => window.dispatchEvent(new Event("beforeunload")));
root.render(
  <Router history={hist}>
    ...
  </Router>

随后在应用程序中捕获了一个表格。

以通过hook挂不起作用，将主要组件变化为

react-router

location

useLocation

hook不起作用，因为

useEffect

钩仅在发生后才检测到位置的变化。

Answer 1

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

const Main = () => {
  const navigate = useNavigate();

  useEffect(() => {
    const beforeUnloadHandler = (event) => {
      // Check if event is being triggered on page unload or navigation
      window.dispatchEvent(new Event("beforeunload"));
    };

    window.addEventListener("beforeunload", beforeUnloadHandler);

    // Cleanup the listener when the component unmounts
    return () => {
      window.removeEventListener("beforeunload", beforeUnloadHandler);
    };
  }, [navigate]); 

  // Your render logic
  return (
    <div>
      {/* Your component JSX */}
    </div>
  );
};

export default Main;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>