React Router+Express通配路由导致静态资源访问失效问题

兄弟，你这问题简直是SPA+Express配置的经典坑——路由注册顺序搞反了！

你现在的代码里，先把app.get("/*")这个通配路由放在了最前面，它会拦截所有进来的请求，不管是React的页面路由还是静态资源（比如bundle.js、CSS文件），都会直接返回index.html。这就导致你访问localhost:3000/bundle.js时，拿到的根本不是JS文件，而是index.html的内容，浏览器自然会报Unexpected token <的语法错误。

直接调整一下路由的注册顺序就能解决，把静态资源托管放在最前面，通配路由放后面：

const express = require("express");
const path = require("path");
const app = express();

// 第一步：先处理静态资源请求，这行必须在通配路由前面！
app.use(express.static(path.join(__dirname, "../public")));

// 第二步：再处理React Router的SPA路由，只有静态资源没匹配到才走这里
app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname, "../public/index.html"), err => {
    if (err) res.status(500).send(err);
  });
});

app.listen(8080, _ => console.log("listening on 8080"));

为啥这么改就行？因为Express的中间件和路由是按注册顺序依次匹配的：

• 当请求是/bundle.js或者/style.css这类静态资源时，express.static会先匹配到，直接返回public文件夹里对应的文件；
• 只有当请求的路径不存在于静态资源中（比如/user/profile这种React Router管理的路由），才会走到后面的通配路由，返回index.html，让React在客户端接管路由逻辑。

额外提醒两点：

• 确认path.join(__dirname, "../public")的路径是正确的，__dirname是当前服务器脚本所在的目录，根据你的项目结构调整相对路径，别让Express找不到public文件夹；
• 就算你有大量图片、字体放在public的子文件夹里（比如public/images、public/fonts），也不用单独配置路由，express.static会自动处理这些子路径的请求，完全不用担心扩展性问题。

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