React项目npm run build打包后站点跳转功能异常如何修复？

异常原因 #

1. serve 命令的默认规则冲突：你使用的serve -s build默认开启了「干净URL」功能，会自动抹除静态资源的.html后缀，因此你跳转指向的tv/indextv.html会被serve重写为tv/indextv，但build目录下的实际文件仍带.html后缀，自然无法匹配到资源。
2. BrowserRouter 路由拦截：生产环境下所有根路径下的请求默认会被React的BrowserRouter接管，你的静态HTML路径如果没有被配置为路由白名单，会被前端路由拦截，无法命中实际的静态文件。
3. Firebase 配置影响（可选排查）：如果项目配置了Firebase Hosting，默认的重写规则会把所有请求都指向index.html走React路由，也会导致静态HTML路径被拦截。

修复方案 #

方案1：调整serve启动参数 #

直接禁用serve的自动重写/干净URL规则即可解决后缀被抹除的问题：

serve -s build --no-clean-urls

方案2：调整跳转路径写法 #

把相对路径改为绝对路径，规避React路由的相对匹配干扰：

<BrowserRouter>
  <Route exact path="/" render={() => {
    // 路径前加/保证从根路径寻址，不受前端路由影响
    window.location.href=`/tv/indextv.html?m=${auth.currentUser.email}&p=${othermail}&t=${othertoken}`
  }} />
</BrowserRouter>

方案3：配置静态资源白名单 #

如果使用Firebase Hosting部署，修改firebase.json配置，优先放行tv目录下的静态资源：

{
  "hosting": {
    "public": "build",
    "rewrites": [
      {
        "source": "/tv/**",
        "destination": "/tv/indextv.html"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

如果是自行用nginx部署，添加以下配置即可：

location /tv/ {
  try_files $uri $uri/ =404;
}

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