React路由在本地计算机上有效,但在GitHub页面上无效

网络

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

任意的

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

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

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

<HashRouter>
   <App />
</HashRouter>

根据文档-在此处进一步阅读<HashRouter />

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

同样从文档中:

由于此技术仅旨在支持旧版浏览器,因此我们建议您配置服务器以供使用<BrowserHistory>

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

我希望这有帮助!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

代码在本地计算机上有效,但在IIS上无效

来自分类Dev

C中的WinSock程序,仅在本地计算机上有效

来自分类Dev

提交CodeEval,程序在我的计算机上有效,但在我提交时不起作用。C

来自分类Dev

在WAMP本地主机上有效但在WebServer上无效的PHP代码

来自分类Dev

我的上传脚本仅在我的计算机上有效

来自分类Dev

wordpress:datepicker在小部件选项页面上有效,但在定制器上无效

来自分类Dev

SilverStripe:表单在主页上有效,但在子页面上无效

来自分类Dev

jQuery ajax调用在本地主机上有效,但在实时服务器上无效

来自分类Dev

“ X”的帐户凭据不正确(但是连接字符串在我的计算机上有效)

来自分类Dev

汤在一个IMBD页面上有效,但在另一页面上无效。怎么解决?

来自分类Dev

代码在JSFiddle上有效,但在本地文件中无效

来自分类Dev

读取本地文件的Javascript在Windows上有效,但在Linux上无效

来自分类Dev

错误405-不允许| 在本地计算机上使用Xampp服务器托管在github页面上的Wordpress网站

来自分类Dev

在 React 中,我的 POST fetch 请求在桌面上有效,但在 Chrome 上的 iPad 上无效,有什么问题?

来自分类Dev

使用主机选项在本地计算机上路由

来自分类Dev

CurrentItem在iOS上无效,但在Android上有效

来自分类Dev

DelegatingHandler在Localhost上有效,但在Azure上无效

来自分类Dev

无法使用本地计算机上的Express加载页面

来自分类Dev

如何在本地计算机上提交jquery页面

来自分类Dev

如何将到远程计算机的连接路由到本地计算机上的端口

来自分类Dev

在WAMP本地主机上有效但在WebServer上不起作用的PHP代码

来自分类Dev

Web服务器上的asp.net MVC页面失败,但在本地计算机上运行良好

来自分类Dev

仅在索引页面上有效?

来自分类Dev

Ping主机名有效,但ssh不适用于本地计算机

来自分类Dev

HMVC Codeigniter在本地服务器上有效,但在Web服务器上无效

来自分类Dev

MySql连接查询在本地服务器上有效,但在实时服务器上无效

来自分类Dev

xargs命令正在本地计算机上运行,但在远程主机上运行时会导致“无效命令”错误

来自分类Dev

您的帐户已具有同一台计算机上的有效iOS发行证书

来自分类Dev

WebRequest 在本地有效,但在发布时无效

Related 相关文章

  1. 1

    代码在本地计算机上有效,但在IIS上无效

  2. 2

    C中的WinSock程序,仅在本地计算机上有效

  3. 3

    提交CodeEval,程序在我的计算机上有效,但在我提交时不起作用。C

  4. 4

    在WAMP本地主机上有效但在WebServer上无效的PHP代码

  5. 5

    我的上传脚本仅在我的计算机上有效

  6. 6

    wordpress:datepicker在小部件选项页面上有效,但在定制器上无效

  7. 7

    SilverStripe:表单在主页上有效,但在子页面上无效

  8. 8

    jQuery ajax调用在本地主机上有效,但在实时服务器上无效

  9. 9

    “ X”的帐户凭据不正确(但是连接字符串在我的计算机上有效)

  10. 10

    汤在一个IMBD页面上有效,但在另一页面上无效。怎么解决?

  11. 11

    代码在JSFiddle上有效,但在本地文件中无效

  12. 12

    读取本地文件的Javascript在Windows上有效,但在Linux上无效

  13. 13

    错误405-不允许| 在本地计算机上使用Xampp服务器托管在github页面上的Wordpress网站

  14. 14

    在 React 中,我的 POST fetch 请求在桌面上有效,但在 Chrome 上的 iPad 上无效,有什么问题?

  15. 15

    使用主机选项在本地计算机上路由

  16. 16

    CurrentItem在iOS上无效,但在Android上有效

  17. 17

    DelegatingHandler在Localhost上有效,但在Azure上无效

  18. 18

    无法使用本地计算机上的Express加载页面

  19. 19

    如何在本地计算机上提交jquery页面

  20. 20

    如何将到远程计算机的连接路由到本地计算机上的端口

  21. 21

    在WAMP本地主机上有效但在WebServer上不起作用的PHP代码

  22. 22

    Web服务器上的asp.net MVC页面失败,但在本地计算机上运行良好

  23. 23

    仅在索引页面上有效?

  24. 24

    Ping主机名有效,但ssh不适用于本地计算机

  25. 25

    HMVC Codeigniter在本地服务器上有效,但在Web服务器上无效

  26. 26

    MySql连接查询在本地服务器上有效,但在实时服务器上无效

  27. 27

    xargs命令正在本地计算机上运行,但在远程主机上运行时会导致“无效命令”错误

  28. 28

    您的帐户已具有同一台计算机上的有效iOS发行证书

  29. 29

    WebRequest 在本地有效,但在发布时无效

热门标签

归档