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: