React路由器在Web上给出404个错误，但在Localhost上工作得很好

发布于 2025-01-31 05:02:58 字数 13838 浏览 3 评论 0原文

我创建了一个React应用程序。但是当我将URL导航到本地的另一页时，它有一些反应路由器问题，它可以很好地工作，但是当我通过HTTP的链接导航时，它会出现404错误。 Navbar在移动设备和其他设备中进行了更改。

这里在其他设备上

这里在移动设备上

当我导航路线上进入另一页时，它显示了以下错误的错误：

这是我在移动设备上的代码

        <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&amp;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>

和其他设备

        <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&amp;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>

提前感谢:)

原文

i have created a react app. but it have some react routers issue when i navigate the URL to another page locally it works perfectly fine but when i navigate by the link of http it gives a 404 error.
The navbar is changed in mobile device and in other devices.

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>

thanks in advance :)

分享到QQ

分享到微博