如何在React+Firebase托管中将主页路由设为非根路径/auth？

核心问题分析 #

本地开发时"homepage": "/auth"能生效是因为React开发服务器会处理路径映射，但部署到Firebase Hosting后，该配置会导致资源路径错误，且无法触发根路径跳转。<base href="/auth">仅设置资源加载的基准路径，不负责页面跳转逻辑。

解决方案 #

方法一：通过Firebase Hosting配置服务器端重定向（推荐） #

直接在firebase.json中添加重定向规则，在服务器层面完成跳转，效率更高且无需修改React代码：

1. 修正package.json中的homepage配置，改为：

   "homepage": "."
   

   或者直接删除该字段，Firebase Hosting会自动适配单页应用的路径。

2. 修改firebase.json的hosting配置，添加redirects数组：

   {
     "hosting": {
       "public": "build",
       "ignore": [
         "firebase.json",
         "**/.*",
         "**/node_modules/**"
       ],
       "redirects": [
         {
           "source": "/",
           "destination": "/auth",
           "type": 301 // 301为永久重定向，如需临时重定向可改为302
         }
       ],
       "rewrites": [
         {
           "source": "**",
           "destination": "/index.html"
         }
       ]
     }
   }
   

3. 重新构建并部署：

   npm run build
   firebase deploy
   

方法二：在React应用内通过路由逻辑跳转 #

如果不想修改Firebase配置，可在React根组件中添加跳转逻辑：

1. 确保已安装react-router-dom，并配置好路由：

   import { Routes, Route, useNavigate, useLocation, useEffect } from 'react-router-dom';
   import Auth from './pages/Auth'; // 你的Auth页面组件
   
   function App() {
     const navigate = useNavigate();
     const location = useLocation();
   
     // 监听路径变化，根路径时跳转到/auth
     useEffect(() => {
       if (location.pathname === '/') {
         navigate('/auth', { replace: true }); // replace避免返回栈中保留根路径
       }
     }, [location.pathname, navigate]);
   
     return (
       <Routes>
         <Route path="/auth" element={<Auth />} />
         {/* 其他路由配置 */}
       </Routes>
     );
   }
   
   export default App;
   

2. 同样修正package.json的homepage为"."或删除，重新构建部署即可。

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