如何在路由切换时卸载ReactRouter6组件？

React Router 6 的 <Route> 组件提供了一个名为“onLeave”的属性，该属性允许您在离开页面时执行一些操作。在组件的 onLeave 函数中，您可以执行任何操作，例如清除状态、取消订阅或卸载组件。

以下是一个示例，展示如何使用 onLeave 属性卸载组件：

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

function MyComponent() {
  const navigate = useNavigate();

  function handleLeave() {
    // 清除状态或取消订阅
  }

  return (
    <Route
      path="/my-path"
      onLeave={handleLeave}
      element={<div>My Component</div>}
    />
  );
}

在这个例子中，当用户离开“/my-path”页面时，handleLeave()函数会被调用，您可以在其中执行任何操作。这将确保在路由切换时，MyComponent 组件将被卸载并且 onLeave 函数将被执行。

注意：如果您希望在 componentDidUpdate() 生命周期中执行一些操作来清除状态或取消订阅，您也可以使用 React Hooks。

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();

  useEffect(() => {
    // 清除状态或取消订阅
    return () => {
      // 卸载组件
    };
  }, [location]);

  return <div>My Component</div>;
}

在这个例子中，当 location 发生变化时，useEffect() hook 将执行。您可以在 hook 的返回函数中在组件卸载时进行清理操作。

通过使用 onLeave 属性或 useEffect() hook，您可以确保在路由切换时卸载 React Router 6 组件。