在React+Vite项目中使用lazy加载为何根节点为空？

核心问题是React.lazy 加载的组件必须被 <Suspense> 组件包裹，否则组件在异步加载阶段会触发渲染暂停的异常，导致整个 App 组件渲染失败，最终无法挂载到 root 节点下，页面呈现空白。

修复步骤 #

1. 在 App.tsx 中导入 Suspense 组件
2. 将懒加载的组件放入 Suspense 内部，并设置加载时的 fallback 内容
3. 建议将 lazy 声明移到组件外部，避免每次组件渲染时重复执行异步导入逻辑

修改后的 App.tsx 代码 #

// App.tsx
import { lazy, Suspense } from "react";
import "./App.css";

// 把lazy声明放在组件外部，避免重复执行异步导入
const MyComponent = lazy(() => import("./MyComponent"));

function App() {
  return (
    <>
      <h1>My page</h1>
      {/* 用Suspense包裹懒加载组件，捕获加载状态 */}
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </>
  );
}

export default App;

补充说明 #

当使用 React.lazy 时，组件是异步加载的。在加载完成前，React 尝试渲染该组件会触发「暂停渲染」的状态，如果没有 Suspense 组件捕获并处理这个状态，React 会终止渲染流程，导致 App 组件无法正常挂载，最终出现 root 节点下无内容的情况。

另外请确认 main.tsx 中的渲染逻辑正确，示例如下：

// main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

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