React 路由适用于本地计算机，但不适用于 GitHub 页面

Question

我已经在 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 页面后工作方式是否有所不同？理想的解决方案是什么？

Answer 1

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

这样的 URL

因此，在基础 URL 的主题标签之后，您的 React Router 正在相应地处理路由。

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

<HashRouter>
   <App />
</HashRouter>

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

A <Router> that uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL.

同样来自文档：

As this technique is only intended to support legacy browsers, we encourage you to configure your server to work with <BrowserHistory> instead.

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

希望对您有所帮助！

React 路由适用于本地计算机，但不适用于 GitHub 页面

React routing works on local machine but not on GitHub pages

javascript

routing

reactjs

react-router