React: 在 GitHub Pages 上使用 react-router 进行客户端路由

Question

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

我尝试向BrowserRouter组件添加basename属性。

<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

该链接提供了关于以客户端路由方式提供应用程序的更好解释。

- nameless

Answer 1

当使用react-router-dom与GitHub页面一起使用时，您需要使用HashRouter而不是BrowserRouter。它使用URL的#片段来保持路由，规避了GH页面上pushState的不支持。

（有一些笨拙的方法可以使GitHub页面支持pushState，但我个人不建议使用。这里有一个指南）

- Dan

---

是的，我知道hashRouter，但我被告知在生产中使用它是不好的做法。此外，我已经看到了一些不错的方法来将BrowserRouter部署到其他静态主机，如Azure和Heroku，但我想使用github。我很想听听如何让BrowserRouter在gh-pages上工作的方法。谢谢。 - nameless

我在我的回答中添加了指南链接，如果您想尝试。当然，HashRouter是一种妥协。但由于GH页面在技术上不支持客户端路由，任何解决方案都将是一种黑客行为，并且实际上不建议用于生产/长期使用。 - Dan

你说得对，我不想使用那个404 hack，那肯定很尴尬。我会选择HashRouter。感谢你的时间！ - nameless

没问题，我很乐意！ - Dan

Answer 2

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

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

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

- Zehao Chen