React项目构建后Bundle加载失败，页面空白屏求助

一、先确认Bundle资源是否正常加载 #

打开浏览器F12开发者工具，切换到「网络」面板刷新页面：

• 查看打包生成的js、css文件是否返回200状态码，有没有404错误
• 如果出现404，直接在package.json里添加"homepage": "."，重新执行构建后再部署，这能解决静态资源路径不对的问题

二、修正react-router-dom的配置细节 #

你的路由语法符合v6版本要求，但有两个细节要注意：

1. 非根路径部署需加basename：如果项目部署在服务器子目录（比如https://xxx.com/my-app/），必须给BrowserRouter指定basename：

<BrowserRouter basename="/my-app">
  <App />
</BrowserRouter>

2. 添加兜底路由：避免访问不存在的路径时空白，在Routes最后加上：

import { Routes, Route, Navigate } from "react-router-dom";

// 放在所有Route后面
<Route path="*" element={<Navigate to="/" replace />} />

三、排查组件本身的问题 #

路由配置没问题的话，大概率是某个页面组件出错导致渲染失败：

• 临时把所有路由组件替换成简单内容测试，比如：

<Route path="/" element={<div>首页测试</div>} />

如果能正常显示，就逐个恢复组件，定位到出问题的那个组件后，检查里面的语法错误、异步请求异常或者未处理的状态问题。

四、检查构建后的index.html #

打开build文件夹里的index.html：

• 确认<div id="root"></div>节点存在
• 确认js、css的引入路径是相对路径（比如./static/js/xxx.js），而不是绝对路径（/static/js/xxx.js）

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