React Router 在 Web 上出现 404 错误，但在本地主机上运行良好
React Routers Giving 404 Error on Web but works perfectly fine on localhost
我已经创建了一个 React 应用程序。但是当我在本地导航 URL 到另一个页面时它有一些反应路由器问题它工作得很好但是当我通过 http 的 link 导航时它给出了 404 错误。
移动设备和其他设备中的导航栏已更改。
here it is on other devices
and here it is on mobile devices
when i navigate the route to go on another page it shows the error of :
here is my code on mobile devices
<nav className="mobileTopBar">
<div className="container bg-grey m-0 text-light">
<div className="col-lg-7 pt-3">
<div className="row">
<div className="col-6">
<img src={MobileLogo} className="ms-2" alt="logo that will show on mobile screens only" />
</div>
<div className="col-6">
<div className="row pt-2">
<p className="col-1 top-pra fw-bolder text-white ms-1"> <a href="tel:+923111661112"> <i class="fas fa-phone-alt text-white"></i> </a> </p>
<p className="col-1 top-pra fw-bolder text-white ms-1"> <a href="https://wa.me/+923111661112/?text=Hello Hoster.Pk"> <i class="fab fa-whatsapp text-white"></i> </a> </p>
<p className="col-1 top-pra fw-bolder"> <a className="col-1 text-decoration-none text-light" href="https://www.facebook.com/hosters.pk" target="_blank"> <i className="fab fa-facebook-f"> </i> </a> </p>
<p className="col-1 top-pra fw-bolder"> <a className="col-1 text-decoration-none text-light" href="https://www.youtube.com/channel/UCQAxN4p6gnl-T0M0UnIOr4w" target="_blank"> <i class="fab fa-youtube"></i> </a> </p>
<p className="col-1 top-pra fw-bolder ms-1"> <a href="col-1 https://pk.linkedin.com/company/pitspk" className="text-white" target="_blank"> <i className="fab fa-linkedin-in"></i> </a> </p>
</div>
</div>
</div>
</div>
<div className="col-lg-5 ps-2 pb-3">
<div class="container-fluid text-start p-0 text-dark">
<button class="navbar-toggler me-5 btn bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-list navbar-toggler-icon text-dark"></i>
</button>
<div class="collapse navbar-collapse me-5" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<span class="nav-link text-white ms-2" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Hosting
<p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span><ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/windows">
<li>
<span class="dropdown-item " href="#">Windows Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/hosting">
<li>
<span class="dropdown-item " href="#">Shared Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/reseller">
<li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/vps">
<li>
<span class="dropdown-item " href="#">VPS Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/dedicate">
<li>
<span class="dropdown-item " href="#">Dedicated Hosting</span>
</li>
</a>
</ul>
</li>
<li class="nav-item text-dark">
<span href="#" class="nav-link mx-2 text-decoration-none">
<a class="text-decoration-none text-white" target="_blank" href="https://hoster.pk/clientarea/cart.php?a=add&domain=register"> Domain </a>
</span>
</li>
<li class="nav-item dropdown">
<span class="nav-link text-white ms-2" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Partners
<p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/reseller"><li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a href="https://SSLS.pk" class="text-decoration-none" target="_blank">
<li>
<span class="dropdown-item " href="#">SSL Reseller</span>
</li>
</a>
<a class="text-decoration-none" href="/Domain">
<li>
<span class="dropdown-item " href="#">Domain Reseller</span>
</li>
</a>
</ul>
</li>
<li class="nav-item">
<span class="nav-link mx-2 " href="#">
<a class="text-decoration-none text-white" href="/affiliate"> Affiliate </a>
</span>
</li>
<li class="nav-item">
<span href="https://hoster.pk/blog/" class="nav-link mx-2 er text-decoration-none">
<a target="_blank" class="text-decoration-none text-white" href="https://hoster.pk/blog/"> Blog </a>
</span>
</li>
</ul>
<button class="btn nav-btn bg-green rounded-pill px-4 p-2 lh-lg text-white fw-bolder" type="submit">
<p class="m-0">
<a target="_blank" class="text-decoration-none text-light" href="https://hoster.pk/clientarea/">CLIENTAREA</a>
</p>
</button>
</div>
</div>
</div>
</div>
</nav>
and on other devices
<nav class="navbar navbar-expand-lg bg-white p-0 m-0 navbar-light">
<div class="container-fluid text-center p-0">
<span class="navbar-brand p-0 m-0" href="#">
<a class="text-decoration-none " href="/">
<img alt="pictures" src={OtherDeviceLogo} className="w-50" />
</a>
</span>
<div className="w-60 float-start OtherDevice">
<div className="my-1">
<form className='card-form p-1 bg-l-grey mx-1' action="https://hoster.pk/clientarea/cart.php?a=add&domain=register" method="post" target='_blank'>
<input type="text" name="query" size="20" className='card-input border-0 px-4 bg-l-grey w-100' placeholder='Find Your Perfect Domain' />
<button type="submit" value="Go" className='card-button btn bg-green w-25 text-white fw-bolder'> Go </button>
</form>
</div>
</div>
<button class="navbar-toggler me-5" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon text-green">
</span>
</button>
<div class="collapse navbar-collapse me-5" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<span class="nav-link text-dark d-flex" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Hosting
<p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/windows">
<li>
<span class="dropdown-item " href="#">Windows Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/hosting">
<li>
<span class="dropdown-item " href="#">Shared Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/reseller">
<li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/vps">
<li>
<span class="dropdown-item " href="#">VPS Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/dedicate">
<li>
<span class="dropdown-item " href="#">Dedicated Hosting</span>
</li>
</a>
</ul>
</li>
<li class="nav-item">
<span href="#" class="nav-link text-dark mx-2 text-decoration-none">
<a class="text-decoration-none" target="_blank" href="https://hoster.pk/clientarea/cart.php?a=add&domain=register"> Domain </a>
</span>
</li>
<li class="nav-item dropdown">
<span class="nav-link text-dark" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Partners <p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/reseller"><li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a href="https://SSLS.pk" class="text-decoration-none" target="_blank">
<li>
<span class="dropdown-item " href="#">SSL Reseller</span>
</li>
</a>
<a class="text-decoration-none" href="/Domain">
<li>
<span class="dropdown-item" href="#">Domain Reseller</span>
</li>
</a>
</ul>
</li>
<li class="nav-item">
<span class="nav-link mx-2 " href="#">
<a class="text-decoration-none" href="/affiliate"> Affiliate </a>
</span>
</li>
<li class="nav-item">
<span href="https://hoster.pk/blog/" class="nav-link mx-2 er text-decoration-none">
<a target="_blank" class="text-decoration-none" href="https://hoster.pk/blog/"> Blog </a>
</span>
</li>
</ul>
<button class="btn nav-btn bg-green rounded-pill px-4 p-2 lh-lg text-white fw-bolder" type="submit">
<p class="m-0">
<a target="_blank" class="text-decoration-none text-light" href="https://hoster.pk/clientarea/">CLIENTAREA</a>
</p>
</button>
</div>
</div>
</nav>
提前致谢:)
如果安装 React Router Dom，则必须更改
来自 <a class="text-decoration-none" href="/windows">
到 <Link class="text-decoration-none" to="/windows">
输入这个link以获得更多https://reactrouter.com/docs/en/v6/getting-started/overview#navigation
我已经创建了一个 React 应用程序。但是当我在本地导航 URL 到另一个页面时它有一些反应路由器问题它工作得很好但是当我通过 http 的 link 导航时它给出了 404 错误。 移动设备和其他设备中的导航栏已更改。
here it is on other devices
and here it is on mobile devices
when i navigate the route to go on another page it shows the error of :
here is my code on mobile devices
<nav className="mobileTopBar">
<div className="container bg-grey m-0 text-light">
<div className="col-lg-7 pt-3">
<div className="row">
<div className="col-6">
<img src={MobileLogo} className="ms-2" alt="logo that will show on mobile screens only" />
</div>
<div className="col-6">
<div className="row pt-2">
<p className="col-1 top-pra fw-bolder text-white ms-1"> <a href="tel:+923111661112"> <i class="fas fa-phone-alt text-white"></i> </a> </p>
<p className="col-1 top-pra fw-bolder text-white ms-1"> <a href="https://wa.me/+923111661112/?text=Hello Hoster.Pk"> <i class="fab fa-whatsapp text-white"></i> </a> </p>
<p className="col-1 top-pra fw-bolder"> <a className="col-1 text-decoration-none text-light" href="https://www.facebook.com/hosters.pk" target="_blank"> <i className="fab fa-facebook-f"> </i> </a> </p>
<p className="col-1 top-pra fw-bolder"> <a className="col-1 text-decoration-none text-light" href="https://www.youtube.com/channel/UCQAxN4p6gnl-T0M0UnIOr4w" target="_blank"> <i class="fab fa-youtube"></i> </a> </p>
<p className="col-1 top-pra fw-bolder ms-1"> <a href="col-1 https://pk.linkedin.com/company/pitspk" className="text-white" target="_blank"> <i className="fab fa-linkedin-in"></i> </a> </p>
</div>
</div>
</div>
</div>
<div className="col-lg-5 ps-2 pb-3">
<div class="container-fluid text-start p-0 text-dark">
<button class="navbar-toggler me-5 btn bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-list navbar-toggler-icon text-dark"></i>
</button>
<div class="collapse navbar-collapse me-5" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<span class="nav-link text-white ms-2" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Hosting
<p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span><ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/windows">
<li>
<span class="dropdown-item " href="#">Windows Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/hosting">
<li>
<span class="dropdown-item " href="#">Shared Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/reseller">
<li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/vps">
<li>
<span class="dropdown-item " href="#">VPS Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/dedicate">
<li>
<span class="dropdown-item " href="#">Dedicated Hosting</span>
</li>
</a>
</ul>
</li>
<li class="nav-item text-dark">
<span href="#" class="nav-link mx-2 text-decoration-none">
<a class="text-decoration-none text-white" target="_blank" href="https://hoster.pk/clientarea/cart.php?a=add&domain=register"> Domain </a>
</span>
</li>
<li class="nav-item dropdown">
<span class="nav-link text-white ms-2" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Partners
<p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/reseller"><li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a href="https://SSLS.pk" class="text-decoration-none" target="_blank">
<li>
<span class="dropdown-item " href="#">SSL Reseller</span>
</li>
</a>
<a class="text-decoration-none" href="/Domain">
<li>
<span class="dropdown-item " href="#">Domain Reseller</span>
</li>
</a>
</ul>
</li>
<li class="nav-item">
<span class="nav-link mx-2 " href="#">
<a class="text-decoration-none text-white" href="/affiliate"> Affiliate </a>
</span>
</li>
<li class="nav-item">
<span href="https://hoster.pk/blog/" class="nav-link mx-2 er text-decoration-none">
<a target="_blank" class="text-decoration-none text-white" href="https://hoster.pk/blog/"> Blog </a>
</span>
</li>
</ul>
<button class="btn nav-btn bg-green rounded-pill px-4 p-2 lh-lg text-white fw-bolder" type="submit">
<p class="m-0">
<a target="_blank" class="text-decoration-none text-light" href="https://hoster.pk/clientarea/">CLIENTAREA</a>
</p>
</button>
</div>
</div>
</div>
</div>
</nav>
and on other devices
<nav class="navbar navbar-expand-lg bg-white p-0 m-0 navbar-light">
<div class="container-fluid text-center p-0">
<span class="navbar-brand p-0 m-0" href="#">
<a class="text-decoration-none " href="/">
<img alt="pictures" src={OtherDeviceLogo} className="w-50" />
</a>
</span>
<div className="w-60 float-start OtherDevice">
<div className="my-1">
<form className='card-form p-1 bg-l-grey mx-1' action="https://hoster.pk/clientarea/cart.php?a=add&domain=register" method="post" target='_blank'>
<input type="text" name="query" size="20" className='card-input border-0 px-4 bg-l-grey w-100' placeholder='Find Your Perfect Domain' />
<button type="submit" value="Go" className='card-button btn bg-green w-25 text-white fw-bolder'> Go </button>
</form>
</div>
</div>
<button class="navbar-toggler me-5" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon text-green">
</span>
</button>
<div class="collapse navbar-collapse me-5" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<span class="nav-link text-dark d-flex" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Hosting
<p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/windows">
<li>
<span class="dropdown-item " href="#">Windows Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/hosting">
<li>
<span class="dropdown-item " href="#">Shared Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/reseller">
<li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/vps">
<li>
<span class="dropdown-item " href="#">VPS Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/dedicate">
<li>
<span class="dropdown-item " href="#">Dedicated Hosting</span>
</li>
</a>
</ul>
</li>
<li class="nav-item">
<span href="#" class="nav-link text-dark mx-2 text-decoration-none">
<a class="text-decoration-none" target="_blank" href="https://hoster.pk/clientarea/cart.php?a=add&domain=register"> Domain </a>
</span>
</li>
<li class="nav-item dropdown">
<span class="nav-link text-dark" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Partners <p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/reseller"><li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a href="https://SSLS.pk" class="text-decoration-none" target="_blank">
<li>
<span class="dropdown-item " href="#">SSL Reseller</span>
</li>
</a>
<a class="text-decoration-none" href="/Domain">
<li>
<span class="dropdown-item" href="#">Domain Reseller</span>
</li>
</a>
</ul>
</li>
<li class="nav-item">
<span class="nav-link mx-2 " href="#">
<a class="text-decoration-none" href="/affiliate"> Affiliate </a>
</span>
</li>
<li class="nav-item">
<span href="https://hoster.pk/blog/" class="nav-link mx-2 er text-decoration-none">
<a target="_blank" class="text-decoration-none" href="https://hoster.pk/blog/"> Blog </a>
</span>
</li>
</ul>
<button class="btn nav-btn bg-green rounded-pill px-4 p-2 lh-lg text-white fw-bolder" type="submit">
<p class="m-0">
<a target="_blank" class="text-decoration-none text-light" href="https://hoster.pk/clientarea/">CLIENTAREA</a>
</p>
</button>
</div>
</div>
</nav>
提前致谢:)
如果安装 React Router Dom，则必须更改
来自 <a class="text-decoration-none" href="/windows">
到 <Link class="text-decoration-none" to="/windows">
输入这个link以获得更多https://reactrouter.com/docs/en/v6/getting-started/overview#navigation