反应路由在本地计算机上有效，但在github页面上无效

Question

我已经在Github页面上部署了我的React App，但是路由在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>

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

Answer 1

您的GitHub页面尝试从服务器提供/covid19-tracker文件夹或文件。解决方案之一可能是使用<HashRouter />。因此，最后您将拥有一个https://<github-url>/#/covid19-tracker之类的URL。

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

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

<HashRouter>
   <App />
</HashRouter>

在此处进一步阅读：<HashRouter />

我希望这会有所帮助！