React中引入Home组件导航时出现"destroy is not a function"错误的解决方法

问题重现 #

在App.js中配置嵌套路由时，为Layout组件的子路由添加指向Home组件的index路由后，访问Home页面会抛出"destroy is not a function"错误，移除该index路由后应用恢复正常。相关代码：

function App() {
  return (
    <div className="App">
      <>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Home />} /> 
            // 移除该行代码应用正常，添加后出现错误
          </Route>
        </Routes>
      </>
    </div>
  );
}
export default App;

排查与解决方向 #

1. 确认Layout组件是否正确渲染Outlet #

嵌套路由的父组件必须通过Outlet来渲染子路由内容，如果Layout组件中没有引入并渲染Outlet，会导致子路由无法正常挂载，引发异常。

修改Layout组件：

import { Outlet } from 'react-router-dom';

function Layout() {
  return (
    <div>
      {/* Layout的头部、侧边栏等自定义内容 */}
      <header>页面导航栏</header>
      {/* 渲染子路由对应的组件 */}
      <Outlet />
    </div>
  );
}
export default Layout;

2. 检查react-router-dom版本兼容性 #

确保项目使用的是react-router-dom v6版本（代码中用到的<Routes>、嵌套路由写法是v6的API），同时确认react和react-router-dom的版本匹配，避免版本不一致导致的API冲突。

查看package.json中的依赖版本：

{
  "dependencies": {
    "react": "^18.2.0",
    "react-router-dom": "^6.8.0"
  }
}

若版本不匹配，重新安装对应版本：

npm install react-router-dom@latest

3. 检查Home组件的副作用清理逻辑 #

"destroy is not a function"错误通常和useEffect的清理函数有关。如果Home组件中的useEffect返回了非函数类型的值（比如undefined、对象等），React在执行组件销毁清理时会抛出该错误。

错误示例：

// Home组件中错误的useEffect写法
useEffect(() => {
  const timer = setInterval(() => {
    console.log('timer running');
  }, 1000);
  // 错误：未返回清理函数，或返回非函数值
  return; 
}, []);

正确写法：

useEffect(() => {
  const timer = setInterval(() => {
    console.log('timer running');
  }, 1000);
  // 返回清理函数，用于组件卸载时清除副作用
  return () => clearInterval(timer);
}, []);

4. 排查自定义路由相关组件 #

如果项目中存在自定义的路由高阶组件（HOC）或封装的路由组件，检查这些组件是否正确处理了子路由的渲染逻辑，是否在内部错误地处理了组件的销毁逻辑。

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