如何在GitHub Pages配置React Router？多页面路由失效问题解决

问题原因 #

GitHub Pages是静态文件托管服务，使用BrowserRouter时，直接访问子路由（如/KapsalonDeTussenstop/nieuws）会触发服务器请求，而服务器找不到对应静态文件会返回404；你之前尝试HashRouter失效，大概率是路径配置错误导致。

方案一：修复BrowserRouter配置（推荐） #

1. 配置BrowserRouter的basename属性 #

在index.js中，给BrowserRouter添加basename，值为你的GitHub Pages项目名称，所有路由会自动带上前缀，无需手动在每个路由路径中添加：

import React from "react"
import ReactDOM from "react-dom/client"
import {App} from "./App"
import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
    <React.StrictMode>
        <BrowserRouter basename="/KapsalonDeTussenstop/">
            <App/>
        </BrowserRouter>
    </React.StrictMode>
)

2. 简化App.js中的路由路径 #

去掉每个路由路径里的/KapsalonDeTussenstop/前缀，直接使用相对路径：

import { Route, Routes } from "react-router-dom"

import Home from "./pages/home";
import Contact from "./pages/contact";
import Nieuws from "./pages/nieuws";
import Openingstijden from "./pages/openingstijden";
import Producten from "./pages/producten";
import Prijzen from "./pages/prijzen";

export function App() {
    return (
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="/nieuws" element={<Nieuws />} />
            <Route path="/openingstijden" element={<Openingstijden />} />
            <Route path="/prijzen" element={<Prijzen />} />
            <Route path="/producten" element={<Producten />} />
        </Routes>
    )
}

3. 添加404.html文件解决刷新404问题 #

在项目的public目录下，复制index.html并重命名为404.html，确保内容完全一致。这样当GitHub Pages返回404时，会加载这个文件，React Router就能接管路由逻辑，避免刷新或直接访问子路由时出错。

方案二：正确使用HashRouter #

如果更倾向于HashRouter，只需修正配置即可：

1. 替换BrowserRouter为HashRouter #

修改index.js：

import React from "react"
import ReactDOM from "react-dom/client"
import {App} from "./App"
import { HashRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
    <React.StrictMode>
        <HashRouter>
            <App/>
        </HashRouter>
    </React.StrictMode>
)

2. 简化App.js路由路径（同方案一的步骤2） #

去掉路径前缀，使用相对路径即可，HashRouter会自动通过URL中的#来管理路由，无需服务器额外配置，本地和部署后都能正常运行。

额外检查 #

确认package.json中的homepage字段已正确设置：

"homepage": "https://<你的GitHub用户名>.github.io/KapsalonDeTussenstop/"

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