带路由的React应用部署GitHub Pages出现空白页报错排查

你页面空白、控制台报路由相关错误的核心原因是嵌套使用了两个互斥的路由容器：BrowserRouter套在HashRouter外层。React Router要求整个应用只需要存在一个顶层路由容器，嵌套会直接导致路由上下文冲突，组件拿不到正确的路由状态，渲染崩溃。

• 移除所有BrowserRouter相关代码，GitHub Pages静态托管场景下只保留HashRouter即可，不需要引入BrowserRouter。
• 修正HashRouter的basename配置，不要传"/"，要匹配你GitHub Pages的项目子路径/minireddit，路由会自动处理路径前缀，不需要你手动给每个Route的path加项目名前缀，手动加反而会导致路径匹配失败。
• 修正后的App.js核心代码参考：

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

// 保留原有页面、组件、样式的导入语句

function App() {
  return (
    <div className="App">
      <NavBar />
      <div className="reddit-container">
        <HashRouter basename="/minireddit">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/subreddit/:name" element={<SubReddit />} />
            <Route path="/search" element={<Search />} />
          </Routes>
        </HashRouter>
        <SideBar />
      </div>
    </div>
  );
}

export default App;

• 代码改完后重新执行部署命令：

npm run deploy

• 部署完成后等1-2分钟让GitHub Pages的缓存生效，访问时可以强制刷新（Ctrl+F5）清掉浏览器本地旧缓存。
• 后续写站内跳转逻辑的时候，直接写路由本身的路径比如/search即可，不需要手动拼接/minireddit前缀，basename配置完成后路由库会自动补全前缀。
• 不要尝试在GitHub Pages上用BrowserRouter，这种模式需要服务端配置所有路径都回退到index.html，GitHub Pages默认不支持该配置，强行用只会出现二级路由刷新404的问题。

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