为何BrowserRouter可用但HashRouter在GitHub Pages部署时失效？

AI 小北

2026-8-23

问题原因与解决方案

核心问题

你用的是react-router-dom v6版本，这个版本已经彻底移除了<Route>组件的component属性，必须用element属性传入JSX元素——和你之前BrowserRouter的写法一致。你在HashRouter代码里还在用component={Home}这种旧写法，这就是路由无法渲染内容的直接原因。

修正后的HashRouter代码

import Home from './pages/Home.js'
import Skills from './pages/Skills.js'
import Test from './pages/test.js'
import {
  HashRouter,
  Routes,
  Route
} from "react-router-dom";
import Attributions from './pages/Attributions.js';
import { Social } from './pages/Social.js';
import { Experience } from './pages/Experience.js';
import { Projects } from './pages/Projects.js';
import Chart from './components/Chart.js';

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route exact path="/" element={<Home/>} />
        <Route exact path="/Skills" element={<Skills/>} />
        <Route exact path="/Attributions" element={<Attributions/>} />
        <Route exact path="/Experience" element={<Experience/>} />
        <Route exact path="/Projects" element={<Projects/>} />
        <Route exact path="/Socials" element={<Social/>} />
        <Route exact path="/test" element={<Test/>} />
        <Route exact path="/Chart" element={<Chart/>} />
      </Routes>
    </HashRouter>
  );
}

export default App;

额外部署注意事项

配置homepage字段：在项目根目录的package.json里添加"homepage": "./"（用相对路径适配GitHub Pages的静态文件结构），或者指定完整路径"homepage": "https://你的用户名.github.io/仓库名"。
部署脚本配置：如果用gh-pages工具部署，先安装依赖：
```
npm install gh-pages --save-dev
```
再在package.json的scripts中添加：
```
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
```
组件导出检查：确认所有页面组件（比如Home、Skills）是默认导出（export default Home），如果是命名导出（export const Home = ...），导入时要加花括号，比如import { Home } from './pages/Home.js'。