React部署Github Pages后路由路径异常：二级路径丢失问题咨询

问题原因 #

你已经在package.json中配置了homepage指定子路径，但React Router未识别这个子路径前缀，导致路由跳转时直接使用根域名路径，而非预期的user.github.io/portfolio-web/xxx。

解决步骤 #

1. 给Router添加basename属性 #

修改路由根组件（通常是BrowserRouter），添加basename属性，值为你的仓库子路径"/portfolio-web"：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter basename="/portfolio-web">
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/about" element={<AboutMe />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

2. 确认部署配置 #

• 确保使用gh-pages包部署，package.json中的脚本配置应为：

  "scripts": {
    "build": "react-scripts build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
  

• 执行npm run deploy后，检查GitHub仓库的gh-pages分支是否包含build目录下的所有文件。

3. 仓库设置验证 #

进入GitHub仓库的「Settings」→「Pages」，确认：

• 部署分支选择gh-pages
• 部署目录选择/(root)（因为gh-pages分支已经是build后的内容）

修改完成后，路由跳转会自动带上/portfolio-web前缀，访问/about时实际路径即为user.github.io/portfolio-web/about。

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