Ratkaistu: React-reitittimen lataussivua ei löydy

Suurin ongelma, joka liittyy React Routerin uudelleenlataussivua ei löydy, on se, että kun käyttäjä päivittää sivun, selain yrittää tehdä pyynnön palvelimelle nykyisestä URL-osoitteesta. Koska React Router on asiakaspuolen reititys, URL-osoitteelle ei kuitenkaan ole vastaavaa palvelinreittiä ja näin ollen palautetaan 404 Not Found -virhe. Tämä voi olla erityisen ongelmallista, jos käyttäjät odottavat tietyn sisällön näkyvän päivityksen yhteydessä.

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// Rivi 1: Tämä rivi tuo BrowserRouter-, Route- ja Switch-komponentit react-router-dom-kirjastosta.

// Rivi 3: Tämä rivi määrittää toiminnon nimeltä App, joka palauttaa JSX-koodin.

// Rivi 5: Tämä rivi kääri koko JSX-koodin reititinkomponenttiin react-router-dom.

// Rivi 6: Tämä rivi kääri kaikki reitit react-router-dom Switch-komponenttiin.

// Rivit 7 – 9: Nämä rivit määrittävät kaksi reittiä '/' ja '/about' vastaaville komponenteineen (Home ja About).

// Rivit 11 - 12: Nämä rivit määrittävät reitin, kun muita reittejä ei täsmää, mikä tekee h1-tunnisteen, jossa lukee "Sivua ei löydy".

Sivua ei löydy -virhe

Sivua ei löydy -virhe React Routerissa on virhe, joka tapahtuu, kun käyttäjä yrittää käyttää sivua tai reittiä, jota ei ole olemassa. Tämä voi tapahtua, jos käyttäjä on kirjoittanut URL-osoitteen väärin tai jos sivu, jota hän yrittää käyttää, on poistettu tai siirretty. React Routerissa tämä virhe käsitellään käyttämällä komponentin renderöintiehdotus ja funktio, joka palauttaa 404-sivun. Näin kehittäjät voivat luoda mukautettuja 404-sivuja, joilla on mitä tahansa haluamaansa sisältöä, kuten hyödyllisiä linkkejä tai anteeksipyyntöviestiä.

Kuinka käsittelen sivua ei löydy React -reitittimestä

Kun käytät React Routeria, voit käsitellä sivua, jota ei löydy, luomalla mukautetun reitin, joka hahmontaa NotFound-komponentin, kun URL-osoite ei vastaa mitään olemassa olevista reiteistä. Tätä varten sinun on luotava uusi reitti, jonka poluksi on asetettu “*”, ja renderöitävä NotFound-komponentti.

Esimerkiksi:

} />

Tämä vastaa kaikkia URL-osoitteita, joita olemassa oleva reitti ei vielä vastaa, ja hahmontaa NotFound-komponentin.

Kuinka pakotan reagoivan sivun latautumaan uudelleen

React Routerissa voit pakottaa sivun latautumaan uudelleen käyttämällä historiaobjektin korvausmenetelmää. Tämä korvaa nykyisen historiapinon merkinnän uudella, mikä pakottaa sivun lataamisen uudelleen. Jotta voit käyttää tätä menetelmää, sinun on ensin hankittava pääsy historiaobjektiin. Voit tehdä tämän antamalla sen ehdotukseksi luodessasi reititinkomponenttia:

const AppRouter = () => (

{/* Reittisi täällä */}

);

Kun sinulla on pääsy historiaobjektiin, voit käyttää sen korvausmenetelmää seuraavasti:

historia.replace('/joku-reitti');