Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon.
Lag en tilpasset 404-side ved å bruke en enkel React-rute for å gi de besøkende en nyttig opplevelse når de trenger det mest.
Før eller siden vil en bruker besøke en URL som ikke finnes på nettstedet ditt. Hva brukeren gjør etter dette er opp til deg.
De kan trykke på tilbake-knappen og forlate nettstedet ditt. I stedet kan du tilby en nyttig 404-side for å hjelpe dem å fortsette å navigere til nettstedet ditt.
For React-nettsteder kan du bruke React-ruteren til å lage en nyttig 404 ikke funnet-side.
Opprette en 404-side
De 404 feil oppstår når du prøver å besøke en side på et nettsted som serveren ikke finner. Som utvikler betyr håndtering av 404-feil å opprette en side som serveren bruker som erstatning når den ikke finner den forespurte siden.
I React gjør du dette ved å lage en ikke-funnet komponent som vil gjengi på ruter som ikke eksisterer.
Denne artikkelen forutsetter at du allerede har en fungerende React-applikasjon med ruteoppsett. Hvis du ikke gjør det, opprette en React-applikasjon og installer deretter Reager Router.
Opprett en ny fil kalt NotFound.js og legg til følgende kode for å lage 404-siden.
import { Link } fra "reager-ruter-dom";
eksportmisligholdefunksjonIkke funnet() {
komme tilbake (
<div>
<h1>Oops! Du ser ut til å være fortapt.</h1>
<s>Her er noen nyttige linker:</s>
<Link til ='/'>Hjem</Link>
<Link til ='/blog'>Blogg</Link>
<Link til ='/contact'>Kontakt</Link>
</div>
)
}
Denne 404-siden gjengir en melding og linker for å omdirigere en bruker til vanlige sider på nettstedet.
Ruting til 404-siden
Du kan lage en normal rute ved å bruke React-ruteren slik:
import { Rute, ruter } fra "reager-ruter-dom";
funksjonApp() {
komme tilbake (
<Ruter>
<Rutebane="/" element={ <Hjem/> }/>
</Routes>
)
}
Du spesifiserer URL-banen og elementet du vil gjengi på den ruten.
404-siden vises for stier som ikke finnes på nettstedet. Så i stedet for å spesifisere banen, bruk en stjerne (*).
<Rutebane='*' element={<Ikke funnet />}/>
Ved hjelp av * gjengir NotFound-komponenten for alle URL-ene som ikke er spesifisert i ruter.
Ruting i React
Du kan enkelt opprette en 404-side for alle URL-er som ikke finnes i React-nettappen din ved hjelp av en ruter.
Nettlesere har en standard 404-side, men ved å lage en egendefinert side kan du fortelle brukerne hva som gikk galt og hvordan de kan fikse det. Du kan også lage en 404-side som passer inn i merkevaren din.
