GH 页面加载不正确的 React 路由器页面？

【问题标题】：GH Pages loading incorrect React Router Page?GH 页面加载不正确的 React 路由器页面？
【发布时间】：2021-01-21 05:23:08
【问题描述】：

我有一个小型 React 应用程序，当与 GH-Pages 一起部署时，它会在页面加载时加载我的错误组件，而不是我的主页？

谁能解释一下这是为什么？

路线

<Router>
     <Navbar />
     <Switch>
       <Route exact path = "/">
         <Home />
       </Route>
       <Route path = "/about">
         <About />
       </Route>
       <Route path = "/cocktail/:id">
         <SingleCocktail />
       </Route>
       <Route path = "*">
         <Error />
       </Route>
     </Switch>
   </Router>

【问题讨论】：

在 GH-Pages 中确保使用 HashRouter 而不是任何其他，因为那里的服务器配置
我不知道该怎么做，但我肯定会找到文档。谢谢

标签： reactjs github-pages

【解决方案1】：

由于 GitHub 页面的服务器配置，您需要在应用程序中使用 HashRouter。您的 GitHub 页面 url 可能会在主 URL 之后附带一个路径，这就是在您的路由中触发 * 的原因。

为此，您只需将您现在导入的路由器替换为HashRouter：

代替：

// import { Router, Switch, Route } from 'react-router-dom';

你把它改成：

import { HashRouter as Router, Switch, Route } from 'react-router-dom';

您的其余代码可以保持原样。（很可能）

【讨论】：

就这么简单。谢谢！