Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską.
Utwórz niestandardową stronę 404, korzystając z prostej trasy React, aby zapewnić odwiedzającym przydatne doświadczenie, gdy najbardziej tego potrzebują.
Prędzej czy później użytkownik odwiedzi adres URL, którego nie ma w Twojej witrynie. To, co użytkownik zrobi po tym, zależy od Ciebie.
Mogą nacisnąć przycisk Wstecz i opuścić Twoją witrynę. Zamiast tego możesz udostępnić przydatną stronę 404, aby pomóc im w dalszym poruszaniu się po Twojej witrynie.
W przypadku witryn React możesz użyć routera React, aby utworzyć użyteczną stronę 404, której nie znaleziono.
Tworzenie strony 404
The błąd 404 występuje, gdy próbujesz odwiedzić stronę w witrynie, której serwer nie może znaleźć. Dla programisty obsługa błędów 404 oznacza tworzenie strony, której serwer używa jako zamiennika, gdy nie może znaleźć żądanej strony.
W React robisz to, tworząc nieznaleziony komponent, który będzie renderował się na trasach, które nie istnieją.
W tym artykule założono, że masz już działającą aplikację React z skonfigurowanym routingiem. jeśli nie, stworzyć aplikację React a następnie zainstaluj React routera.
Utwórz nowy plik o nazwie NotFound.js i dodaj następujący kod, aby utworzyć stronę 404.
import { Link } z "reakcja-router-dom";
eksportdomyślnyfunkcjonowaćNie znaleziono() {
powrót (
<dz>
<h1>Ups! Wydajesz się być zagubiony.</h1>
<P>Oto kilka pomocnych linków:</P>
<Link do ='/'>Dom</Link>
<Link do ='/blog'>Blog</Link>
<Link do ='/contact'>Kontakt</Link>
</div>
)
}
Ta strona 404 wyświetla komunikat i linki, które przekierowują użytkownika do popularnych stron w witrynie.
Kierowanie do strony 404
Możesz utworzyć normalną trasę za pomocą routera React w następujący sposób:
import { Trasa, trasy } z "reakcja-router-dom";
funkcjonowaćAplikacja() {
powrót (
<Trasy>
<Ścieżka trasy="/" element={ <Dom/> }/>
</Routes>
)
}
Określasz ścieżkę URL i element, który chcesz renderować na tej trasie.
Strona 404 wyświetla się dla ścieżek, które nie istnieją w witrynie. Dlatego zamiast określać ścieżkę, użyj gwiazdki (*).
<Ścieżka trasy='*' element={<Nie znaleziono />}/>
Za pomocą * renderuje komponent NotFound dla wszystkich adresów URL nie określonych w trasach.
Routing w React
Możesz łatwo utworzyć stronę 404 dla wszystkich adresów URL, które nie istnieją w Twojej aplikacji internetowej React za pomocą routera.
Przeglądarki mają domyślną stronę 404, ale utworzenie niestandardowej strony pozwala powiedzieć użytkownikom, co poszło nie tak i jak mogą to naprawić. Możesz także utworzyć stronę 404, która pasuje do Twojej marki.