Lahendatud: reageeri ruuteri 404 ümbersuunamine

React Router 404 ümbersuunamisega seotud peamine probleem on see, et selle rakendamine võib olla keeruline. Kuna React Routeril pole sisseehitatud 404 lehte, peavad arendajad 404 lehe jaoks marsruudi käsitsi looma ja seejärel konfigureerima ruuteri ümber suunama kõik päringud, mis ei ühti olemasoleva marsruudiga. See nõuab täiendavat koodi ja konfiguratsiooni, mis võib olla aeganõudev ja raske silumine, kui midagi läheb valesti. Lisaks, kui kasutaja navigeerib otse URL-ile, mida pole olemas, näeb ta siiski vealehte, selle asemel et suunata 404 lehele.

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>  
);

// 1. rida: see rida impordib komponendid BrowserRouter, Route ja Switch teegist react-router-dom.

// Rida 3: see rida määratleb funktsiooni nimega App, mis tagastab JSX-i.

// Read 5–7: need read mähivad rakenduse komponendi ruuteri komponendiks alates react-router-dom.

// Read 8-10: need read määratlevad kaks marsruuti vastavalt komponentide Kodu ja Teave jaoks.

// Rida 12: see rida määratleb marsruudi, mis suunab ümber avalehele, kui ükski teine ​​marsruut ei vasta.

Mis on tõrkekood 404

React Routeri tõrkekood 404 on HTTP olekukood, mis näitab, et taotletud ressurssi ei leitud. Tavaliselt tagastatakse see siis, kui kasutaja proovib pääseda lehele või marsruudile, mida pole olemas. See võib juhtuda, kui kasutaja on URL-i valesti sisestanud või kui leht on eemaldatud või teisaldatud ilma selle linke värskendamata. Kui see juhtub, kuvab React Router üldise 404 lehe koos asjakohase teatega, mis teavitab kasutajat nende veast.

404 suunamine

React Routeris on 404 ümbersuunamine viis kasutajate ümbersuunamiseks teisele lehele, kui nad proovivad pääseda juurde kehtetule URL-ile. See võib olla kasulik kasutajatele parema kasutuskogemuse pakkumisel, kui nad sisestavad vale URL-i või proovivad pääseda lehele, mida pole olemas. 404 ümbersuunamist saab rakendada React Routeri ümbersuunamise komponendi abil, mis võimaldab teil määrata selle lehe teenime, kuhu soovite kasutaja suunata. Näiteks kui keegi proovib juurde pääseda /invalid-url, võite kasutada ümbersuunamiskomponenti järgmiselt:

Seonduvad postitused:

Jäta kommentaar