Основният проблем, свързан с пренасочването на React Router 404, е, че може да бъде трудно за прилагане. Тъй като React Router няма вградена страница 404, разработчиците трябва ръчно да създадат маршрут за страницата 404 и след това да конфигурират рутера да пренасочва всички заявки, които не съответстват на съществуващ маршрут. Това изисква допълнителен код и конфигурация, което може да отнеме много време и трудно за отстраняване на грешки, ако нещо се обърка. Освен това, ако потребител навигира директно до URL адрес, който не съществува, той пак ще види страница за грешка, вместо да бъде пренасочен към страницата 404.
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: Този ред импортира компонентите BrowserRouter, Route и Switch от библиотеката react-router-dom.
// Ред 3: Този ред дефинира функция, наречена App, която връща JSX.
// Редове 5-7: Тези редове обвиват компонента на приложението в компонент на рутер от react-router-dom.
// Редове 8-10: Тези редове дефинират два маршрута съответно за компонентите Home и About.
// Ред 12: Този ред дефинира маршрут, който пренасочва към началната страница, ако няма друг съвпадащ маршрут.
Какво е код за грешка 404
Код за грешка 404 в React Router е HTTP код за състояние, който показва, че исканият ресурс не може да бъде намерен. Обикновено се връща, когато потребител се опита да получи достъп до страница или маршрут, който не съществува. Това може да се случи, ако потребителят е въвел грешно URL или ако страницата е премахната или преместена, без да се актуализират връзките към нея. Когато това се случи, React Router ще покаже обща страница 404 с подходящо съобщение, информиращо потребителя за неговата грешка.
404 Redirect
В React Router пренасочването 404 е начин за пренасочване на потребителите към различна страница, когато се опитат да получат достъп до невалиден URL адрес. Това може да бъде полезно за осигуряване на по-добро изживяване на потребителите, когато въведат неправилен URL адрес или се опитат да осъществят достъп до страница, която не съществува. Пренасочването 404 може да се реализира с помощта на компонента Redirect от React Router, който ви позволява да посочите името на пътя на страницата, към която искате да пренасочите потребителя. Например, ако някой се опита да получи достъп до /invalid-url, можете да използвате компонента Redirect по следния начин:
