React Router渲染时出现Minified React error #426问题求助

问题场景 #

项目中使用React Router的lazy加载组件：

const App = lazy(() => import('@/page/main/App'));

路由定义：

{
    path: "/editor",
    element: (
        <App />
    )
},

有时打开页面触发错误：

react-01c77f91.js:32 Error: Minified React error #426; visit https://reactjs.org/docs/error-decoder.html?invariant=426 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Bf (react-01c77f91.js:32:38536)
    at no (react-01c77f91.js:32:39435)
    at bi (react-01c77f91.js:32:35803)
    at vs (react-01c77f91.js:32:36605)
    at bt (react-01c77f91.js:30:3259)
    at react-01c77f91.js:32:34140
overrideMethod @ console.js:213
$i @ react-01c77f91.js:32
Cf.o.componentDidCatch.n.callback @ react-01c77f91.js:32
Za @ react-01c77f91.js:30
ps @ react-01c77f91.js:32
If @ react-01c77f91.js:32
Ph @ react-01c77f91.js:32
Mh @ react-01c77f91.js:32
rn @ react-01c77f91.js:32
vs @ react-01c77f91.js:32
bt @ react-01c77f91.js:30
(anonymous) @ react-01c77f91.js:32
Show 1 more frame
Show less
react-01c77f91.js:51 React Router caught the following error during render Error: Minified React error #426; visit https://reactjs.org/docs/error-decoder.html?invariant=426 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Bf (react-01c77f91.js:32:38536)
    at no (react-01c77f91.js:32:39435)
    at bi (react-01c77f91.js:32:35803)
    at vs (react-01c77f91.js:32:36605)
    at bt (react-01c77f91.js:30:3259)
    at react-01c77f91.js:32:34140 

已尝试用<Suspense fallback={<div>Loading...</div>}>包裹组件，但问题未解决。

可行解决方案 #

1. 调整Suspense包裹层级 #

Lazy加载的组件必须被Suspense直接或间接包裹，且Suspense不能放在lazy组件内部。正确的路由层面包裹写法：

import { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';

const App = lazy(() => import('@/page/main/App'));

function RouterConfig() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/editor" element={<App />} />
      </Routes>
    </Suspense>
  );
}

若使用嵌套路由，需确保父路由的element也被Suspense覆盖，或者在应用最外层统一包裹Suspense。

2. 检查组件导出方式 #

确保@/page/main/App是默认导出，因为lazy默认读取模块的默认导出。如果是命名导出，需调整lazy写法：

// 针对命名导出的组件
const App = lazy(() => import('@/page/main/App').then(module => ({ default: module.App })));

3. 排查打包与缓存问题 #

• 检查webpack/vite等打包工具的代码分割配置，确保chunk文件能正确生成和加载；
• 清除浏览器缓存，旧缓存的chunk可能导致加载失败；
• 开发环境关闭代码压缩，查看完整错误信息，定位具体报错位置。

4. 添加错误边界捕获异常 #

即使有Suspense，网络错误或组件加载失败仍可能触发报错，新增错误边界处理：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error("组件加载失败:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div>页面加载失败，请刷新重试</div>;
    }
    return this.props.children;
  }
}

// 使用示例
<ErrorBoundary>
  <Suspense fallback={<div>Loading...</div>}>
    <Routes>
      <Route path="/editor" element={<App />} />
    </Routes>
  </Suspense>
</ErrorBoundary>

5. 验证懒加载路径正确性 #

在开发环境直接导入组件测试，确认路径和导出无问题：

import App from '@/page/main/App';
// 若此处报错，说明路径或组件导出存在问题

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