部署在Firebase的React Router应用直接访问路由遇404错误求助

这是个很常见的单页应用(SPA)路由问题，我来帮你梳理原因和解决方案：

问题根源 #

当你通过页面内的"Topics"链接跳转时，是React Router在客户端处理路由跳转，不会向服务器发送新的HTTP请求；但直接在地址栏输入路由或刷新页面时，浏览器会直接向服务器发送对应路径的请求，而你的服务器（这里是Firebase Hosting）没有配置这些客户端路由的返回规则，所以返回了404错误。Create React App自带的开发服务器和部署工具已经默认处理了这个逻辑，所以在Codesandbox的CRA环境下运行正常，但你的非CRA项目需要手动配置。

针对Firebase Hosting的具体修复步骤 #

因为你的项目部署在Firebase Hosting，只需要修改firebase.json的配置，让所有客户端路由请求都转发到主入口文件（通常是index.html）：

1. 打开项目根目录的firebase.json文件
2. 在hosting配置中添加rewrites规则：

{
  "hosting": {
    "public": "build", // 替换成你的静态文件输出目录，比如dist或build
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

• source: "**" 表示匹配所有路径的请求
• destination: "/index.html" 表示把这些请求都转发到主入口文件，交给React Router处理路由

3. 重新部署到Firebase Hosting：

firebase deploy --only hosting

其他服务器的通用方案（供参考） #

如果后续切换到其他服务器，比如Express或Nginx，也可以用类似逻辑配置：

• Express服务器：在入口文件添加兜底路由

const path = require('path');
// 先配置静态文件服务
app.use(express.static(path.join(__dirname, 'build')));
// 兜底路由，所有未匹配的请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

• Nginx服务器：修改配置文件的location块

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

配置完成后，直接输入https://playlists-22855.firebaseapp.com/client/create或者刷新页面，应该就能正常加载了。

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