Problemi kryesor në lidhje me ridrejtimin e React Router 404 është se mund të jetë i vështirë për t'u zbatuar. Meqenëse React Router nuk ka një faqe të integruar 404, zhvilluesit duhet të krijojnë manualisht një rrugë për faqen 404 dhe më pas të konfigurojnë ruterin për të ridrejtuar çdo kërkesë që nuk përputhet me një rrugë ekzistuese. Kjo kërkon kod dhe konfigurim shtesë, të cilat mund të kërkojnë kohë dhe të vështira për t'u korrigjuar nëse diçka shkon keq. Për më tepër, nëse një përdorues lundron drejtpërdrejt në një URL që nuk ekziston, ai do të shohë përsëri një faqe gabimi në vend që të ridrejtohet në faqen 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>
);
// Rreshti 1: Kjo linjë importon komponentët BrowserRouter, Route dhe Switch nga biblioteka react-router-dom.
// Rreshti 3: Kjo linjë përcakton një funksion të quajtur App që kthen JSX.
// Linjat 5-7: Këto rreshta mbështjellin komponentin e aplikacionit në një komponent Router nga react-router-dom.
// Linjat 8-10: Këto rreshta përcaktojnë dy rrugë për komponentët Home dhe About.
// Rreshti 12: Kjo linjë përcakton një rrugë që ridrejton në faqen kryesore nëse asnjë rrugë tjetër nuk përputhet.
Çfarë është një kod gabimi 404
Një kod gabimi 404 në React Router është një kod statusi HTTP që tregon se burimi i kërkuar nuk mund të gjendej. Zakonisht kthehet kur një përdorues përpiqet të hyjë në një faqe ose rrugë që nuk ekziston. Kjo mund të ndodhë nëse përdoruesi ka shkruar gabim një URL, ose nëse faqja është hequr ose zhvendosur pa përditësuar lidhjet me të. Kur kjo të ndodhë, React Router do të shfaqë një faqe të përgjithshme 404 me një mesazh të përshtatshëm që informon përdoruesin për gabimin e tyre.
404 Ridrejtim
Në React Router, një ridrejtim 404 është një mënyrë për të ridrejtuar përdoruesit në një faqe tjetër kur ata përpiqen të hyjnë në një URL të pavlefshme. Kjo mund të jetë e dobishme për t'u ofruar përdoruesve një përvojë më të mirë kur ata futin një URL të pasaktë ose përpiqen të hyjnë në një faqe që nuk ekziston. Ridrejtimi 404 mund të zbatohet duke përdorur komponentin Redirect nga React Router, i cili ju lejon të specifikoni emrin e rrugës së faqes ku dëshironi të ridrejtoni përdoruesin. Për shembull, nëse dikush përpiqet të hyjë në /invalid-url, mund të përdorni komponentin Redirect si ky:
