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

nam*_*ess 3 github-pages reactjs react-router parceljs

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

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

<BrowserRouter basename={process.env.PUBLIC_URL}>
Run Code Online (Sandbox Code Playgroud)

这里对问题有更好的解释:

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

Dan*_*rzo 5

与 GitHub 页面一起使用时react-router-dom,您需要使用HashRouter而不是BrowserRouter. 它使用#URL 片段来保留路由,从而避免了pushStateGH 页面缺乏支持的问题。

(制作 GitHub 页面有一些尴尬的方法pushState但我个人并不推荐它们。这里有一个指南