React 路由适用于本地机器，但不适用于 GitHub 页面答案

【问题标题】：React routing works on local machine but not on GitHub pagesReact 路由适用于本地机器，但不适用于 GitHub 页面
【发布时间】：2020-04-12 11:18:35
【问题描述】：

我已经在 Github 页面上部署了我的 React 应用程序，但路由在 Github 页面上不起作用。

只有基本 URL 有效。如果我导航到任何其他页面，则会收到错误 404。

App.js

<Router>

        <nav role="navigation" id="nav_bar_hamburger">
          <div id="menuToggle">
            <input type="checkbox" />
            <span></span>
            <span></span>
            <span></span>

            <ul id="menu">
              <a href="/covid19-tracker"><li>Worldwide</li></a>
              <a href="/india-statewise"><li>India-Statewise</li></a>
              <a href="/coming-soon"><li>Coming Soon</li></a>
            </ul>
          </div>
        </nav>



        <div className="routingContainer">

          <Switch>
            <Route path="/covid19-tracker" component={WorldwideContainer} />
            <Route path="/india-statewise" component={IndianStateWise} />
            <Route path="/coming-soon" component={temp} />
          </Switch>
          <hr />
        </div>
 </Router>

BrowserRouter 部署到 Github 页面后的工作方式是否有所不同？什么是理想的解决方案？

【问题讨论】：

标签： javascript reactjs routing react-router

【解决方案1】：

您的 GitHub 页面尝试从服务器端提供 /covid19-tracker 文件夹或文件，而不是从您的 React 应用程序中查找路由。可能使用<HashRouter /> 是解决方案之一。所以最后你会有一个类似https://<github-url>/#/covid19-tracker的URL。

因此，在基本 URL 的标签之后，您的 React Router 会相应地处理路由。

您可以在应用中添加以下内容，而不是 <BrowserRouter />：

<HashRouter>
   <App />
</HashRouter>

基于文档 - 在此处进一步阅读：<HashRouter />:

<Router> 使用 URL 的哈希部分（即window.location.hash）来使您的 UI 与 URL 保持同步。

同样来自文档：

由于此技术仅用于支持旧版浏览器，因此我们建议您将服务器配置为使用 <BrowserHistory>。

但在这种情况下，您可能无权进行该修改。

我希望这会有所帮助！

【讨论】：