React构建后非默认路由加载空白页面问题求助

核心原因分析 #

非根路由加载空白，大概率是静态资源路径错误或React路由配置不规范导致，结合你的代码，主要排查以下几点：

1. React路由组件类型错误 #

你代码中使用的<Router>如果是基础的Router组件而非BrowserRouter，会导致客户端路由无法正常工作。React Router中，BrowserRouter才是适配服务端fallback的路由容器。

2. React打包时静态资源路径配置错误 #

使用Create React App构建时，默认会将静态资源路径设为相对路径，当访问/admin/login这类嵌套路由时，浏览器会尝试从/admin/static/js/xxx.js加载资源，而实际资源在/static/目录下，导致404，页面空白。

3. Express服务端路径配置冗余或错误 #

你写了两个app.get("/*")和app.get("/*/*")，后者完全冗余；同时静态资源的相对路径可能因项目目录结构导致解析错误。

具体修复步骤 #

步骤1：修正React路由组件 #

确保导入并使用BrowserRouter：

import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';

// 原代码中的<Router>保持不变，因为已经用BrowserRouter别名了
<Router>
  <Switch>
    {/* 你的路由配置 */}
    <Route path="/booking" component={Booking} />
    <Route path="/bookings" component={Bookings} />
    <Route path="/admin/login" component={AdminLogin} />
    <Route path="/admin/panel" component={AdminPanel} />
    <Route path="/admin/new" component={AddPhone} />
    <Route path="/admin/list" component={PhoneList} />
    <Route path="/admin/edit/:id" component={EditPhone} />
    <Route exact path="/" component={Home} />
    <Redirect to="/" />
  </Switch>
</Router>

步骤2：配置React打包的静态资源路径 #

在React项目的package.json中添加homepage字段，确保静态资源使用绝对路径：

{
  "homepage": "/"
}

然后重新执行打包命令：

npm run build

步骤3：简化并修正Express服务端代码 #

删除冗余的/*/*路由，使用绝对路径确保静态资源和index.html路径正确：

const path = require('path');

// 静态资源服务：用resolve确保路径绝对正确
app.use(express.static(path.resolve(__dirname, './client/build')));

// API路由保持不变
app.use("/auth", require("./routes/auth"));
app.use("/api", require("./routes/api"));
app.use("/api/booking", require("./routes/booking"));

// 所有非API请求都返回index.html，交给React路由处理
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, './client/build', 'index.html'));
});

app.listen(PORT, () => {
  console.log("Listening to PORT : ", PORT);
});

步骤4：验证修复 #

重启Express服务，访问/admin/login等路由，同时打开浏览器控制台的网络标签，检查静态资源（js、css文件）是否返回200状态码。如果仍有问题，确认client/build目录是否存在，且__dirname指向的服务器目录是否正确（可通过console.log(__dirname)打印验证）。

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