如何修复GitHub Pages页面刷新时出现的404错误

• 确认package.json中homepage字段已正确配置：

  "homepage": "https://bogdangapon.github.io/pixabay-api/"
  

• 替换路由模式：将React Router的BrowserRouter换成HashRouter（GitHub Pages不支持HTML5 History模式的路由 fallback），示例代码：

  import { HashRouter } from 'react-router-dom';
  
  ReactDOM.render(
    <HashRouter>
      <App />
    </HashRouter>,
    document.getElementById('root')
  );
  

• 重新构建部署：执行npm run build，将build目录内容推送到gh-pages分支；若使用gh-pages包，确保package.json的scripts里配置了"deploy": "gh-pages -d build"，再运行npm run deploy。
• 检查仓库Pages设置：确认源分支为gh-pages，根目录选择/。

若以上操作无效，核对rafgraph方案的配置细节：确保build目录下的404.html与index.html内容一致，且在index.html的<head>中添加了对应的路由处理脚本：

<script type="text/javascript">
  (function(l) {
    if (l.search) {
      const q = {};
      l.search.slice(1).split('&').forEach(v => {
        const a = v.split('=');
        q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
      });
      if (q.p !== undefined) {
        window.history.replaceState(null, null,
          l.pathname.slice(0, -1) + (q.p || '') +
          (q.q ? ('?' + q.q) : '') +
          l.hash
        );
      }
    }
  }(window.location))
</script>

内容的提问来源于stack exchange，提问作者Богдан Гапоненко