Ang pangunahing problema na nauugnay sa pag-redirect ng React Router 404 ay maaaring mahirap itong ipatupad. Dahil ang React Router ay walang built-in na 404 na pahina, ang mga developer ay dapat na manu-manong gumawa ng ruta para sa 404 na pahina at pagkatapos ay i-configure ang router upang i-redirect ang anumang mga kahilingan na hindi tumutugma sa isang kasalukuyang ruta. Nangangailangan ito ng karagdagang code at configuration, na maaaring magtagal at mahirap i-debug kung may mali. Bukod pa rito, kung direktang nagna-navigate ang isang user sa isang URL na wala, makakakita pa rin sila ng pahina ng error sa halip na ma-redirect sa 404 page.
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>
);
// Linya 1: Ini-import ng linyang ito ang mga bahagi ng BrowserRouter, Route, at Switch mula sa library ng react-router-dom.
// Linya 3: Tinutukoy ng linyang ito ang isang function na tinatawag na App na nagbabalik ng JSX.
// Mga Linya 5-7: Binabalot ng mga linyang ito ang bahagi ng App sa isang bahagi ng Router mula sa react-router-dom.
// Mga Linya 8-10: Tinutukoy ng mga linyang ito ang dalawang ruta para sa Home at About na mga bahagi ayon sa pagkakabanggit.
// Linya 12: Tinutukoy ng linyang ito ang isang ruta na nagre-redirect sa Home page kung walang ibang ruta na tumutugma.
Ano ang 404 Error Code
Ang isang 404 error code sa React Router ay isang HTTP status code na nagpapahiwatig na ang hiniling na mapagkukunan ay hindi mahanap. Karaniwan itong ibinabalik kapag sinubukan ng isang user na i-access ang isang pahina o ruta na wala. Ito ay maaaring mangyari kung ang user ay nagkamali sa pag-type ng isang URL, o kung ang pahina ay inalis o inilipat nang hindi ina-update ang mga link dito. Kapag nangyari ito, magpapakita ang React Router ng generic na 404 na pahina na may naaangkop na mensahe na nagpapaalam sa user ng kanilang error.
404 Pag-redirect
Sa React Router, ang 404 redirect ay isang paraan upang i-redirect ang mga user sa ibang page kapag sinubukan nilang mag-access ng di-wastong URL. Maaari itong maging kapaki-pakinabang para sa pagbibigay sa mga user ng mas magandang karanasan kapag naglagay sila ng maling URL o sinubukang i-access ang isang page na wala. Maaaring ipatupad ang 404 redirect gamit ang Redirect component mula sa React Router, na nagbibigay-daan sa iyong tukuyin ang pathname ng page kung saan mo gustong i-redirect ang user. Halimbawa, kung may sumubok na i-access ang /invalid-url, maaari mong gamitin ang bahagi ng Redirect tulad nito:
