如何正确部署React应用到子目录 解决刷新跳转首页问题

问题根因 #

三个配置错误共同导致问题：

1. .htaccess重写规则语法错误，没有把不存在的路径正确转发给React入口文件index.html
2. React Router配置了basename="/boss/"后，内部路由重复添加了/boss前缀，导致直接访问https://uuu.vip/boss时匹配不到对应路由，触发通配规则跳转到首页
3. 冗余的exact属性无实际作用，react-router v6默认就是精确匹配逻辑

具体修复步骤 #

1. 修正.htaccess重写规则 #

原配置最后一条重写规则缺少分隔空格，规则完全不生效。把站点/boss目录下的.htaccess文件替换为以下内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /boss/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /boss/index.html [L]
</IfModule>

注意：这个.htaccess文件必须放在/boss子目录下，和打包生成的index.html同层级，不要放到站点根目录。

2. 修正React Router路由配置 #

因为已经给Router设置了basename="/boss/"，所有内部路由会自动拼接这个前缀，不需要再重复写/boss路径。修改App.js里的路由部分：

<Router basename="/boss">
  <ScrollToTop/>
  <Navbar />
  <Routes>
    {/* 根路径/对应访问地址 https://uuu.vip/boss，需要渲染哪个组件直接替换element即可 */}
    <Route path="/" element={<Johnny />} />
    <Route path="/values" element={<Mission />} />
    <Route path="/founders" element={<About />} />
    <Route path="/inspirations" element={<Shoutouts />} />
    {/* 如果你需要保留独立路径访问Home页，可以加下面这行，不需要就删掉 */}
    <Route path="/home" element={<Home />} />
    {/* 404路由放最后，作为路径匹配失败的 fallback */}
    <Route path="*" element={<Home/>} />
  </Routes>
</Router>

配置说明：

• basename末尾的斜杠可以去掉，避免路径拼接出现双斜杠问题
• 删掉原来重复的path="/boss/"路由，这个路由实际匹配的地址是https://uuu.vip/boss/boss，正常访问根本匹配不到
• 去掉所有Route上的exact属性，v6版本默认按路径精确匹配，不需要额外声明

3. 重新打包部署 #

package.json里的homepage配置是正确的，不需要修改。在项目根目录重新执行打包命令：

npm run build

打包完成后，把build文件夹内的所有文件直接上传到站点的/boss目录下，保证/boss/index.html可以直接访问，不要把整个build文件夹传上去变成/boss/build/index.html的错误层级。

验证 #

1. 直接访问https://uuu.vip/boss，确认渲染预期的Johnny组件，不会跳转到Home
2. 依次进入/values、/founders、/inspirations等子页面，点击浏览器刷新按钮，确认页面正常显示，不会跳回首页

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