Solved: react router add fallback to catch all

Ang pangunahing problema na nauugnay sa React Router at pagdaragdag ng fallback upang mahuli ang lahat ay maaaring mahirap i-configure nang maayos ang fallback na ruta. Kailangang i-configure ang fallback na ruta sa paraang makukuha nito ang lahat ng kahilingan, kabilang ang mga hindi wastong ruta. Kung hindi nagawa nang tama ang configuration, ang mga kahilingan para sa mga di-wastong ruta ay hindi mahuhuli ng fallback na ruta at maaaring magresulta sa mga error o hindi inaasahang pag-uugali. Bukod pa rito, kung ang application ay naglalaman ng mga dynamic na ruta (hal., batay sa input ng user), kailangan itong isaalang-alang kapag kino-configure ang fallback na ruta upang mahuli rin sila nito.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Fallback route */}
      <Route component={NoMatch} /> 

    </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 2: Tinutukoy ng linyang ito ang isang constant na tinatawag na App na isang bahagi ng function.
// Linya 3: Ang linyang ito ay nagre-render ng Router component mula sa react-router-dom.
// Linya 4: Ang linyang ito ay nagre-render ng Switch component mula sa react-router-dom.
// Mga Linya 5 at 6: Ang mga linyang ito ay nagre-render ng dalawang bahagi ng Ruta na may eksaktong mga path at mga bahagi na ire-render kapag ang mga path na iyon ay tumugma.
// Linya 8: Ang linyang ito ay nagre-render ng fallback na ruta kung wala sa iba pang mga ruta ang tumugma. Ire-render nito ang bahaging NoMatch kung walang iba pang rutang tumutugma.

Ano ang react router

Ang React Router ay isang library sa pagruruta para sa mga application ng React. Nagbibigay-daan ito sa mga developer na lumikha ng mga ruta at bahagi na maaaring magamit upang mag-navigate sa pagitan ng iba't ibang mga pahina sa isang React na application. Nagbibigay din ito ng mga tampok tulad ng dynamic na pagtutugma ng ruta, mga parameter ng query, at estado ng lokasyon. Bilang karagdagan, nagbibigay ito ng suporta para sa pag-render sa gilid ng server at paghahati ng code.

Catch-all fallback na ruta

Ang catch-all fallback na ruta ay isang ruta sa React Router na tumutugma sa anumang landas na hindi naitugma ng anumang iba pang mga ruta. Ang ganitong uri ng ruta ay kadalasang ginagamit upang lumikha ng isang 404 na pahina, o upang mag-render ng isang bahagi para sa lahat ng hindi magkatugmang mga landas. Mahalagang tandaan na ang catch-all fallback na ruta ay dapat palaging ang huling ruta sa listahan ng mga ruta, dahil ito ay tutugma sa anumang landas at pipigil sa iba pang mga ruta na maitugma.

Paano tukuyin nang maayos ang fallback na ruta

Kapag gumagamit ng React Router, ang fallback na ruta ay isang ruta na ginagamit kapag walang ibang ruta ang tumutugma sa hiniling na URL. Karaniwan itong ginagamit upang i-redirect ang mga user sa isang 404 na pahina o ilang iba pang pahina kapag ang hiniling na URL ay hindi umiiral.

Upang matukoy nang maayos ang isang fallback na ruta sa React Router, dapat ka munang gumawa ng a component at balutin ito sa iyong mga ruta. Sa loob ng component, dapat mong isama ang iyong mga karaniwang ruta na sinusundan ng a sangkap na walang tinukoy na landas. Ito ang iyong magiging fallback na ruta at kukuha ng anumang mga kahilingan na hindi tumutugma sa alinman sa iyong iba pang mga ruta. Pagkatapos ay maaari mong tukuyin kung ano ang dapat mangyari kapag ang rutang ito ay tumugma, tulad ng pag-redirect sa isang 404 na pahina o pagpapakita ng ilang iba pang nilalaman.

Bakit palaging na-trigger ang fallback na ruta

Ang fallback na ruta sa React Router ay palaging nati-trigger kapag ang isang URL path ay hindi tumutugma sa alinman sa mga kasalukuyang ruta. Ito ay maaaring mangyari kapag ang isang user ay manu-manong nag-type sa isang maling URL, o kung ang routing logic ng application ay hindi maayos na na-configure. Ang fallback na ruta ay nagbibigay-daan sa mga developer na pangasiwaan ang mga sitwasyong ito nang maganda at magbigay ng feedback sa user, tulad ng isang 404 page o pag-redirect sa kanila sa home page.

Kaugnay na mga post:

Mag-iwan ng komento