Express托管多React应用的内部路由失效问题排查

嘿，我一眼就看到几个关键问题导致App2的内部路由失效了，咱们一步步来修复：

1. 修正Express服务器的路由配置错误 #

你的server.js里有两处明显的笔误，这是导致App2路由失效的核心原因：

• 你写的/customer/*路由应该是/app2/*，对应App2的访问路径
• 路由里的client_customer路径应该是client_app2，和前面静态文件的路径保持一致

修正后的server.js代码：

//*** server.js
//**************
const express = require('express');
const path = require('path');
const app = express();

// 先处理API路由（如果有的话）放在最前面

// Serve app 2 static files
app.use('/app2', express.static(path.join(__dirname, 'client_app2/build')));
// Serve app 1 static files
app.use(express.static(path.join(__dirname, 'client_app1/build')));

// Serve app 2 build index - 修正路径和路由匹配规则
app.get('/app2/*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'client_app2', 'build', 'index.html'));
});

// Serve app 1 build index
app.get('/*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'client_app1', 'build', 'index.html'));
});

const PORT = process.env.PORT || 80;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

2. 给App2的React Router添加basename配置 #

App2部署在/app2路径下，但你的React Router还在使用根路径作为基准，导致它无法识别/app2/login这类带前缀的路由。需要给Router组件添加basename属性：

修正后的App2代码：

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

function App() {
  return (
    <Router basename="/app2"> {/* 这里添加basename，指定路由基准路径 */}
      <Fragment>
        <h1>App 2 (nested app)</h1> {/* 顺便把标题改对，你之前写的是App1 */}
        <Switch>
          <Route path='/login'>
            <h2>Login</h2>
          </Route>
          <Route exact path='/register'>
            <h2>Registration</h2>
          </Route>
          {/* 新增默认路由，匹配/app2根路径 */}
          <Route exact path='/'>
            <h2>App2 Home</h2>
          </Route>
        </Switch>
      </Fragment>
    </Router>
  );
}

3. 确认App2的package.json配置正确 #

你已经设置了"homepage": "/app2"，这个是对的——它会让React在build时生成带/app2前缀的资源路径，确保静态资源能正确加载。本地开发的proxy配置可以简化为：

"proxy": "http://localhost:80",
"homepage": "/app2"

最后一步：重新构建并部署 #

• 对两个React应用分别执行npm run build
• 把更新后的server.js和两个build文件夹一起部署到Heroku

这样调整后，访问/app2会显示App2的首页，/app2/login和/app2/register就能正确匹配对应的路由组件了。

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