我已经在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] 删除。
我来说两句