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进行客户端路由

2 个答案: