Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision.
Skapa en anpassad 404-sida med en enkel React-rutt för att ge dina besökare en användbar upplevelse när de behöver det som mest.
Förr eller senare kommer en användare att besöka en webbadress som inte finns på din webbplats. Vad användaren gör efter detta är upp till dig.
De kan trycka på bakåtknappen och lämna din webbplats. Istället kan du tillhandahålla en användbar 404-sida för att hjälpa dem att fortsätta att navigera till din webbplats.
För React-webbplatser kan du använda React-router för att skapa en användbar 404-sida som inte hittas.
Skapa en 404-sida
De 404 fel inträffar när du försöker besöka en sida på en webbplats som servern inte kan hitta. Som utvecklare innebär hantering av 404-fel att skapa en sida som servern använder som en ersättning när den inte kan hitta den begärda sidan.
I React gör du detta genom att skapa en ej hittad komponent som renderar på rutter som inte finns.
Den här artikeln förutsätter att du redan har en fungerande React-applikation med routinginställning. Om du inte gör det, skapa en React-applikation och sedan installera Reager Router.
Skapa en ny fil som heter NotFound.js och lägg till följande kod för att skapa 404-sidan.
importera { Länk } från "reagera-router-dom";
exporterastandardfungeraHittades inte() {
lämna tillbaka (
<div>
<h1>hoppsan! Du verkar vara vilsen.</h1>
<sid>Här är några användbara länkar:</s>
<Länk till ='/'>Hem</Link>
<Länk till ='/blog'>Blogg</Link>
<Länk till ='/contact'>Kontakt</Link>
</div>
)
}
Denna 404-sida återger ett meddelande och länkar för att omdirigera en användare till vanliga sidor på webbplatsen.
Omdirigering till 404-sidan
Du kan skapa en normal rutt med hjälp av React-router så här:
importera { Rutt, rutter } från "reagera-router-dom";
fungeraApp() {
lämna tillbaka (
<Rutter>
<Vägväg="/" element={ <Hem/> }/>
</Routes>
)
}
Du anger URL-sökvägen och det element du vill rendera vid den rutten.
404-sidan visas för sökvägar som inte finns på webbplatsen. Så istället för att ange sökvägen, använd en asterisk (*).
<Vägväg='*' element={<Hittades inte />}/>
Använder sig av * renderar NotFound-komponenten för alla webbadresser som inte anges i rutter.
Routing i React
Du kan enkelt skapa en 404-sida för alla webbadresser som inte finns i din React-webbapp med hjälp av en router.
Webbläsare har en standard 404-sida men genom att skapa en anpassad sida kan du berätta för dina användare vad som gick fel och hur de kan fixa det. Du kan också skapa en 404-sida som passar in i ditt varumärke.