Express加载路由时出现Cannot GET/url错误求助

运行Express加载路由时碰到Cannot GET /url错误，按道理不用给每个URL配置显式路由。试过Express通配路由、配置Webpack这些方案，通配路由能返回index.html，但对应的路由还是加载不了。一开始以为是React Router的问题，换成简易Node+Express+React项目、直接复制代码也没解决，不知道该怎么办。

排查步骤与解决方案 #

• 先配置静态资源托管
  Express必须先正确托管React打包后的静态资源，通配路由要放在静态资源中间件之后。如果是create-react-app项目，打包产物默认在build目录，不是开发时的public目录，所以要先加这行：

  app.use(express.static(path.join(__dirname, '..', 'client', 'build')));
  

• 调整通配路由的位置和路径
  通配路由要放在所有路由规则的最后，避免被其他路由拦截。同时检查sendFile的路径是否指向正确的index.html（打包后的build目录下的文件），用path.resolve比path.join更不容易出错：

  // 放在所有路由的最后
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '..', 'client', 'build', 'index.html'), (err) => {
      if (err) {
        res.status(500).send(err);
        console.error('加载首页失败:', err);
      }
    });
  });
  

• 核对React Router配置
  确保用的是BrowserRouter（不是HashRouter），并且正确定义了/url的路由：

  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  
  function App() {
    return (
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/url" element={<YourTargetComponent />} />
          {/* 加上404兜底路由 */}
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </Router>
    );
  }
  

  如果是开发环境用create-react-app的内置服务器，记得在package.json里加"homepage": "."，防止静态资源路径错误。

• 检查路由拼写与层级
  确认React Router里的/url路由没有拼写错误，也没有被嵌套路由的规则覆盖。

原始代码参考 #

你提供的Express通配路由代码

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, '..', 'client', 'public', 'index.html'), function(err) {
      if (err) {
        res.status(500).send(err)
        console.log("not working");
      }
    })
  })

你提供的index.html代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

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