修改React Router路径为/services/时遇Unexpected token '<'错误求助

问题本质 #

这问题跟react-router-dom半毛钱关系都没有，纯粹是服务器配置没跟上SPA路由规则。当你访问/services/（带末尾斜杠）时，服务器没把请求正确导向React的入口文件index.html，反而返回了404页面或者其他HTML内容。浏览器拿到这些内容后，误以为是JS代码去解析，自然就会报Unexpected token '<'——毕竟HTML开头的<在JS里就是非法语法。

具体解决办法 #

1. 修复服务器路由配置

• 如果你用Create React App开发：
  • 本地开发的npm start已经处理了SPA路由，但生产部署必须单独配置：
    • 用Nginx部署：在Nginx的配置文件里加这段规则，让所有请求都 fallback 到index.html：

      location / {
        try_files $uri $uri/ /index.html;
      }
      

    • 用Netlify/Vercel这类平台：
      • Netlify：在项目根目录建_redirects文件，内容写/* /index.html 200
      • Vercel：建vercel.json文件，内容如下：

        {
          "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
        }
        

2. 临时规避：重定向去掉末尾斜杠

要是暂时改不了服务器配置，可以在React Router里加个重定向规则，把带斜杠的路径转成不带的：

// 在App.js的路由配置里加这一条
<Route path="/services/" element={<Navigate to="/services" replace />} />

这样用户访问/services/会自动跳转到/services，绕开服务器的解析问题。

3. 检查public路径配置

如果项目的homepage配置错了，也可能导致资源加载失败触发类似报错。打开package.json确认：

{
  "homepage": "."
}

如果是自定义Webpack配置，要确保output.publicPath = '/'。

为啥重装react-router-dom没用？ #

因为这问题是服务器端的路由逻辑问题，和react-router-dom的代码完全无关，重装依赖当然解决不了。

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