Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision.
Erstellen Sie eine benutzerdefinierte 404-Seite mit einer einfachen React-Route, um Ihren Besuchern eine hilfreiche Erfahrung zu bieten, wenn sie sie am dringendsten benötigen.
Früher oder später wird ein Benutzer eine URL besuchen, die auf Ihrer Website nicht existiert. Was der Benutzer danach tut, liegt bei Ihnen.
Sie könnten die Zurück-Taste drücken und Ihre Website verlassen. Stattdessen können Sie eine nützliche 404-Seite bereitstellen, um ihnen zu helfen, weiterhin zu Ihrer Website zu navigieren.
Für React-Websites können Sie den React-Router verwenden, um eine nützliche 404-Nicht-gefunden-Seite zu erstellen.
Erstellen einer 404-Seite
Der 404 Fehler tritt auf, wenn Sie versuchen, eine Seite auf einer Website zu besuchen, die der Server nicht finden kann. Als Entwickler bedeutet die Behandlung von 404-Fehlern, eine Seite zu erstellen, die der Server als Ersatz verwendet, wenn er die angeforderte Seite nicht finden kann.
In React erstellen Sie dazu eine nicht gefundene Komponente, die auf nicht vorhandenen Routen gerendert wird.
Dieser Artikel geht davon aus, dass Sie bereits eine funktionierende React-Anwendung mit eingerichtetem Routing haben. Wenn nicht, Erstellen Sie eine React-Anwendung und dann installieren Router reagieren.
Erstellen Sie eine neue Datei namens NotFound.js und fügen Sie den folgenden Code hinzu, um die 404-Seite zu erstellen.
importieren { Verknüpfung } aus "reagieren-router-dom";
ExportStandardFunktionNicht gefunden() {
zurückkehren (
<div>
<h1>Hoppla! Du scheinst verloren zu sein.</h1>
<P>Hier sind einige hilfreiche Links:</P>
<Link zu='/'>Heim</Link>
<Link zu='/blog'>Bloggen</Link>
<Link zu='/contact'>Kontakt</Link>
</div>
)
}
Diese 404-Seite gibt eine Nachricht und Links aus, um einen Benutzer auf allgemeine Seiten auf der Website umzuleiten.
Weiterleitung zur 404-Seite
Sie können eine normale Route mit dem React-Router wie folgt erstellen:
importieren { Strecke, Strecken } aus "reagieren-router-dom";
FunktionApp() {
zurückkehren (
<Routen>
<Routenpfad="/" element={ <Heim/> }/>
</Routes>
)
}
Sie geben den URL-Pfad und das Element an, das Sie auf dieser Route rendern möchten.
Die 404-Seite wird für Pfade angezeigt, die auf der Website nicht vorhanden sind. Verwenden Sie also, anstatt den Pfad anzugeben, ein Sternchen (*).
<Routenpfad='*' element={<Nicht gefunden />}/>
Verwenden * rendert die NotFound-Komponente für alle URLs, die nicht in Routen angegeben sind.
Weiterleitung in React
Mit einem Router können Sie ganz einfach eine 404-Seite für alle URLs erstellen, die in Ihrer React-Webanwendung nicht vorhanden sind.
Browser haben eine Standard-404-Seite, aber wenn Sie eine benutzerdefinierte Seite erstellen, können Sie Ihren Benutzern mitteilen, was schief gelaufen ist und wie sie es beheben können. Sie können auch eine 404-Seite erstellen, die zu Ihrer Marke passt.