部署到Github Pages后React应用仅首页可访问，切换页面报404如何解决

问题原因 #

该问题是Github Pages作为静态文件服务器的特性导致的：BrowserRouter依赖HTML5 History API实现无刷新路由切换，本地开发时webpack-dev-server做了兜底配置，所有路径都会返回index.html，因此运行正常；但Github Pages默认没有该配置，当你直接访问子路由或者刷新子路由页面时，服务器找不到对应路径的静态文件，就会返回404。

解决方案1：替换为HashRouter（最简单，无需额外配置） #

HashRouter使用URL的hash部分（#后面的内容）管理路由，这部分内容不会发送到服务器，Github Pages只会请求根路径的index.html，路由逻辑完全由前端处理，不会出现404。
修改你的路由配置代码即可：

// 先修改路由导入
import { HashRouter, Routes, Route } from 'react-router-dom'

const Router = () => {
    return (
        <HashRouter basename={process.env.PUBLIC_URL}>
            <Routes>
                <Route path='/' element={<AboutUs />} />
                <Route path='/hotel' element={<Hotel />} />
                <Route path='/ContactUs' element={<ContactUs />} />
                <Route path='/RoomsPage' element={<RoomsPage />} />
            </Routes>
        </HashRouter>
    );
};

改完后重新执行npm run deploy部署即可生效，缺点是URL会带有#符号。

解决方案2：使用404.html兜底（保留BrowserRouter，无#符号） #

如果你不想URL带#，可以通过自定义404页面实现请求重定向：

1. 在项目public文件夹下新建404.html，添加以下内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Redirecting...</title>
  <script>
    sessionStorage.redirect = location.href;
  </script>
  <meta http-equiv="refresh" content="0;URL='https://JakubSoldek.github.io/HotelLiveDemo/'">
</head>
<body>
  <p>Redirecting to homepage...</p>
</body>
</html>

2. 在public/index.html的<head>标签最开头添加以下脚本：

<script>
  (function(){
    var redirect = sessionStorage.redirect;
    delete sessionStorage.redirect;
    if (redirect && redirect != location.href) {
      history.replaceState(null, null, redirect);
    }
  })();
</script>

3. 重新执行npm run deploy部署即可，访问子路由或者刷新都不会再出现404。

验证操作 #

部署完成后等待2-3分钟让Github Pages缓存更新，清除浏览器缓存后再测试路由跳转和刷新即可。

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