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，但我个人不推荐它们。Here's a guide for that )

Answer 2

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

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

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

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

React: client-side routing with react-router on gh pages

github-pages

reactjs

react-router

parceljs