Ratkaistu: reagoi reitittimen 404 uudelleenohjaus

Suurin React Router 404 -uudelleenohjaukseen liittyvä ongelma on, että sen toteuttaminen voi olla vaikeaa. Koska React Routerissa ei ole sisäänrakennettua 404-sivua, kehittäjien on luotava manuaalisesti reitti 404-sivulle ja määritettävä reititin ohjaamaan uudelleen kaikki pyynnöt, jotka eivät vastaa olemassa olevaa reittiä. Tämä vaatii lisäkoodia ja -määrityksiä, mikä voi olla aikaa vievää ja vaikeaa virheenkorjaus, jos jokin menee pieleen. Lisäksi, jos käyttäjä siirtyy suoraan URL-osoitteeseen, jota ei ole olemassa, hän näkee silti virhesivun sen sijaan, että hänet ohjattaisiin 404-sivulle.

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

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

      {/* 404 Redirect */}
      <Route render={() => (<Redirect to="/" />)} /> 

    </Switch>
  </Router>  
);

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

// Rivi 3: Tämä rivi määrittää funktion nimeltä App, joka palauttaa JSX:n.

// Rivit 5-7: Nämä rivit käärivät sovelluskomponentin reititinkomponenttiin react-router-domista.

// Rivit 8-10: Nämä rivit määrittelevät kaksi reittiä Home- ja About-komponenteille.

// Rivi 12: Tämä rivi määrittää reitin, joka ohjaa kotisivulle, jos muuta reittiä ei löydy.

Mikä on 404-virhekoodi

React Routerin virhekoodi 404 on HTTP-tilakoodi, joka osoittaa, että pyydettyä resurssia ei löydy. Se palautetaan yleensä, 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 on poistettu tai siirretty päivittämättä sen linkkejä. Kun näin tapahtuu, React Router näyttää yleisen 404-sivun, jossa on asianmukainen viesti, joka ilmoittaa käyttäjälle virheestä.

404 uudelleenohjaus

React Routerissa 404-uudelleenohjaus on tapa ohjata käyttäjät toiselle sivulle, kun he yrittävät käyttää virheellistä URL-osoitetta. Tämä voi olla hyödyllistä tarjota käyttäjille parempi käyttökokemus, kun he kirjoittavat väärän URL-osoitteen tai yrittävät päästä sivulle, jota ei ole olemassa. 404-uudelleenohjaus voidaan toteuttaa React Routerin Redirect-komponentilla, jonka avulla voit määrittää sen sivun polun, jolle haluat ohjata käyttäjän. Jos esimerkiksi joku yrittää käyttää osoitetta /invalid-url, voit käyttää uudelleenohjauskomponenttia seuraavasti: