React中将BrowserRouter替换为HashRouter后页面无法渲染求助

问题背景 #

React项目原本使用BrowserRouter，但GitHub Pages不兼容该路由模式，替换为HashRouter后URL显示正常，但点击导航链接时页面仅刷新主页，无法渲染对应路由组件。

原BrowserRouter代码（本地正常运行） #

import "./App.css";
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import NavigationMenu from "./components/NavigationMenu";
import AboutMe from "./components/AboutMe";
import Game from "./components/Game";

function App() {
  return (
    <BrowserRouter>
      <NavigationMenu/>
      <Routes>
        <Route path='/' element={<Home/>}/>
        <Route path='/about-me' element={<AboutMe/>}/>
        <Route path='/clicker' element={<Game/>}/>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

尝试的HashRouter代码 #

import logo from "./logo.svg";
import "./App.css";
// import { BrowserRouter, Routes ,Route } from 'react-router-dom';
import { HashRouter, Routes ,Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import NavigationMenu from "./components/NavigationMenu";
import AboutMe from "./components/AboutMe";
import Game from "./components/Game";

function App() {
  return (
    <HashRouter>
      <NavigationMenu/>
      <Routes>
        <Route path='/about-me' element={<AboutMe/>}/>
        <Route path='/clicker' element={<Game/>}/>
        <Route path='/' element={<Home/>}/>
      </Routes>
    </HashRouter>
  );
}

export default App;

解决步骤 #

1. 修正导航菜单的链接方式 #

问题核心是导航菜单中大概率使用了原生<a>标签，而非react-router-dom提供的<Link>组件。原生<a>会触发整页刷新，破坏单页应用的路由逻辑。

修改NavigationMenu组件中的链接：

// 错误写法（导致页面刷新）
<a href="/about-me">关于我</a>

// 正确写法（使用react-router-dom的Link）
import { Link } from 'react-router-dom';
<Link to="/about-me">关于我</Link>

2. 移除无用的Switch导入 #

react-router-dom v6中已用<Routes>替代<Switch>，代码中导入的Switch未被使用，直接删除即可：

// 移除该行
import { HashRouter, Routes ,Route, Switch } from 'react-router-dom';

// 修改为
import { HashRouter, Routes ,Route } from 'react-router-dom';

3. 确认路由路径顺序（可选） #

虽然v6的<Routes>会自动匹配最精确的路径，但将根路径(/)放在最后是更稳妥的写法，避免提前匹配：

<Routes>
  <Route path='/about-me' element={<AboutMe/>}/>
  <Route path='/clicker' element={<Game/>}/>
  <Route path='/' element={<Home/>}/>
</Routes>

验证 #

修改后重新部署到GitHub Pages，点击导航链接时，URL会正确更新为#/about-me这类格式，页面不会刷新，对应组件可正常渲染。

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