部署至GitHub Pages后React Router二次点击不渲染组件问题

问题原因 #

• GitHub Pages 仅支持静态文件托管，使用 BrowserRouter 时，跳转后刷新或直接访问子路由，服务器会返回404（不存在对应物理文件），导致路由逻辑无法正常触发。
• 项目部署在子路径 /restaurant/ 下，但未配置 basename，路由路径匹配错误，引发组件渲染异常。

解决方案 #

1. 配置 Router 的 basename #

修改路由根组件，给 BrowserRouter 添加 basename 属性，同时将子路由改为相对路径：

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter basename="/restaurant">
      <Context.Provider value={{Data}}>
        <Routes>
          <Route path="/" element={<Header />}>
            <Route index element={<Home />} />
            <Route path="menu" element={<Menu />} />
            <Route path="about" element={<About />} />
            <Route path="contact" element={<Contact />} />
          </Route>
        </Routes>
        <Footer />
      </Context.Provider>
    </BrowserRouter>
  );
}

2. 添加 404 重定向文件 #

在项目 public 目录下创建 404.html，内容完全复制 index.html。这样 GitHub Pages 找不到对应路径时，会返回该页面，让 React Router 接管路由处理。

3. 设置 package.json 的 homepage #

在 package.json 中添加或修改：

"homepage": "https://alien949.github.io/restaurant/"

4. 重新部署 #

执行构建命令（如 npm run build），将构建后的文件重新部署到 GitHub Pages。

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