React：在 gh 页面上使用 react-router 进行客户端路由

Question

我遇到了 React Create App 文档中讨论的关于使用 HTML5 pushState 历史 API 的路由器如何在静态文件服务器上失败而不将其配置为每次都提供 index.html 的问题。 使用 github 页面时如何解决此问题？ 另外我没有使用 Create React App 或 react-scripts

我曾尝试向 BrowserRouter 组件添加基本名称

<BrowserRouter basename={process.env.PUBLIC_URL}>

对这里问题的更好解释：

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-routing

Answer 1

在 GitHub 页面上使用react-router-dom时，您需要使用HashRouter而不是BrowserRouter 。 它使用 URL 的#片段来保留路由，从而避免 GH 页面上缺乏对pushState的支持。

（为 GitHub 页面制作pushState有一些笨拙的方法，但我个人不推荐它们。这是一个指南）

Answer 2

import { HashRouter, BrowserRouter, Route, Switch } from 'react-router-dom';
ReactDOM.render(

      <HashRouter>
        <App />
      </HashRouter>,
  document.getElementById('root')
);

我使用 HashRouter 解决了这个问题。