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

IT技术 javascript reactjs routing react-router
2021-05-06 14:23:10

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

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

应用程序.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 的工作方式是否有所不同？对此的理想解决方案是什么？

1个回答

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

因此，在基本 URL 的主题标签之后，您的React 路由器将相应地处理路由。

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

<HashRouter>
   <App />
</HashRouter>

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

一个<Router>使用该URL（即哈希部分window.location.hash），以确保您的UI同步与URL。

同样来自文档：

由于此技术仅用于支持旧版浏览器，因此我们鼓励您配置服务器以使用它<BrowserHistory>。

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

我希望这有帮助！

其它你可能感兴趣的问题
上一篇如何在react虚拟化表的每一行的开头添加一个复选框？ 下一篇React 挂钩依赖项，包括它创建一个无限循环，不包括它不会给我最新的值