React路由切换时出现Uncaught runtime error: destroy is not a function求助

这个错误基本是React副作用清理机制出了问题，结合路由切换触发、刷新消失的场景，重点排查以下几个方向：

• 检查Home组件中useEffect的返回值
  React要求useEffect的返回值要么是一个清理函数，要么是undefined。如果返回了对象、字符串、数字这类非函数值，React会把这个值当作清理函数去调用，自然会报destroy is not a function。
  错误写法示例：

  useEffect(() => {
    // 业务逻辑
    return { clear: () => {} }; // 返回对象而非函数
  }, []);
  

  修正方式：要么返回合法的清理函数，要么不写return语句（默认返回undefined）：

  useEffect(() => {
    // 业务逻辑
    return () => {
      // 这里写清理逻辑，比如取消订阅、清除定时器
    };
  }, []);
  

• 排查自定义Hook或第三方库Hook的副作用
  如果Home组件里用了自己写的自定义Hook或者第三方库提供的Hook，检查这些Hook内部的useEffect是否遵循了返回规则。比如某个自定义Hook不小心返回了非函数值，也会触发这个错误。

• 确认路由组件的渲染方式
  检查你的路由配置，有没有把Home组件直接当作函数调用的情况：
  错误写法：

  <Route path="/" element={Home()} />
  

  这种写法会直接执行组件函数，导致组件的钩子逻辑异常，正确的做法是用JSX标签渲染：

  <Route path="/" element={<Home />} />
  

• 检查清理函数的闭包问题
  如果清理函数中引用了组件的状态或变量，确保这些值在组件卸载时没有被意外修改成非函数类型。比如某个状态在组件生命周期后期被改成了字符串，而清理函数试图调用它，也会引发类似错误。

内容的提问来源于stack exchange，提问作者Protyusha Ghosh