Vite+React项目中React Router构建后页面空白问题求助

1. 排查路由模式问题 #

如果使用BrowserRouter，直接双击打开本地dist目录下的index.html会因为缺少服务器对HTML5 History API的支持，导致路由无法正常匹配，页面空白。

• 解决方式：
  • 本地预览用vite preview命令启动服务访问，不要直接打开静态文件
  • 若必须本地静态打开，替换BrowserRouter为HashRouter，路由会以#开头，无需服务器支持

2. 检查Vite的base路径配置 #

如果项目部署路径不是根目录，需在vite.config.js/ts中配置base属性，否则build后资源加载路径错误：

export default defineConfig({
  base: './', // 若部署在子目录则写对应路径，比如'/my-project/'
  // 其他配置项
})

3. 确认路由组件的包裹与匹配规则 #

• 确保所有路由被Routes（React Router v6）或Switch（v5）包裹，同时添加兜底路由避免无匹配项导致空白：

// React Router v6示例
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<NotFound />} /> {/* 兜底路由，捕获所有未匹配路径 */}
    </Routes>
  );
}

4. 验证组件生产环境渲染逻辑 #

排查路由对应组件是否存在生产环境专属问题：比如依赖开发环境变量、条件渲染错误等。可以先简化组件，只渲染纯文本测试是否正常显示。

5. 检查build后资源加载状态 #

打开浏览器开发者工具的Network标签，刷新页面查看JS、CSS等资源的加载状态（状态码是否为200）。若出现404，说明路径配置有误，调整vite.config.js的base或路由路径。

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