Solvita: reagi enkursigilo aldonu fallback por kapti ĉiujn

La ĉefa problemo rilata al React Router kaj aldonado de rezervitinero por kapti ĉion estas, ke povas esti malfacile agordi la rezervitineron. La rezerva itinero devas esti agordita tiel ke ĝi kaptos ĉiujn petojn, inkluzive de tiuj, kiuj ne estas validaj itineroj. Se la agordo ne estas farita ĝuste, tiam petoj por nevalidaj itineroj ne estos kaptitaj de la rezerva itinero kaj povas rezultigi erarojn aŭ neatenditan konduton. Aldone, se la aplikaĵo enhavas dinamikajn itinerojn (ekz., surbaze de uzant-enigo), tiam ĉi tiuj devas esti konsiderataj dum agordo de la rezervitinero por ke ili ankaŭ estu kaptitaj de ĝi.

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>  
);

// Linio 1: Ĉi tiu linio importas la komponentojn BrowserRouter, Route, kaj Switch el la biblioteko react-router-dom.
// Linio 2: Ĉi tiu linio difinas konstantan nomitan App, kiu estas funkciokomponento.
// Linio 3: Ĉi tiu linio prezentas la Router-komponenton de react-router-dom.
// Linio 4: Ĉi tiu linio prezentas la Ŝaltilo-komponenton de react-router-dom.
// Linioj 5 & 6: Ĉi tiuj linioj prezentas du Itinerajn komponentojn kun precizaj vojoj kaj komponantoj por esti bildigitaj kiam tiuj vojoj estas kongruaj.
// Linio 8: Ĉi tiu linio faras rezervan itineron se neniu el la aliaj itineroj estas kongrua. Ĝi redonos la NoMatch-komponenton se neniuj aliaj itineroj kongruas.

Kio estas reakcia enkursigilo

React Router estas vojiga biblioteko por React-aplikoj. Ĝi permesas al programistoj krei itinerojn kaj komponantojn, kiuj povas esti uzataj por navigi inter malsamaj paĝoj en React-aplikaĵo. Ĝi ankaŭ provizas funkciojn kiel dinamika itinerkongruo, demandaj parametroj kaj loka stato. Aldone, ĝi provizas subtenon por servilflanka bildigo kaj kododisigo.

Kapt-ĉia rezerva vojo

Kaptebla rezerva itinero estas itinero en React Router, kiu kongruas kun ajna vojo, kiu ne estis egalita per iuj aliaj itineroj. Ĉi tiu speco de itinero ofte estas uzata por krei 404 paĝon, aŭ por bildigi komponanton por ĉiuj nekongruaj vojoj. Gravas noti, ke la rezigna vojo ĉiam devus esti la lasta itinero en la listo de itineroj, ĉar ĝi kongruos kun ajna vojo kaj malhelpos ke aliaj itineroj estu kongruaj.

Kiel difini rezervitineron ĝuste

Kiam vi uzas React Router, rezervitinero estas itinero uzata kiam neniuj aliaj itineroj kongruas kun la petita URL. Ĝi estas kutime uzata por redirekti uzantojn al paĝo 404 aŭ iu alia paĝo kiam la petita URL ne ekzistas.

Por difini rezervitineron ĝuste en React Router, vi unue devus krei a komponanto kaj envolvu ĝin ĉirkaŭ viaj itineroj. Ene de la komponanto, vi devus inkluzivi viajn normalajn itinerojn sekvitajn de a komponento kun neniu vojo specifita. Ĉi tio estos via rezerva itinero kaj kaptos iujn ajn petojn, kiuj ne kongruas kun iuj el viaj aliaj itineroj. Vi tiam povas specifi kio devus okazi kiam ĉi tiu itinero estas kongrua, kiel redirekti al paĝo 404 aŭ montri iun alian enhavon.

Kial la rezerva vojo ĉiam ekfunkciiĝis

La rezerva itinero en React Router ĉiam estas ekigita kiam URL-vojo ne kongruas kun iu ajn el la ekzistantaj itineroj. Ĉi tio povas okazi kiam uzanto permane tajpas malĝustan URL, aŭ se la vojiglogiko de la aplikaĵo ne estas ĝuste agordita. La rezervitinero permesas al programistoj pritrakti ĉi tiujn scenarojn gracie kaj doni retrosciigon al la uzanto, kiel ekzemple 404 paĝo aŭ redirektante ilin al la ĉefpaĝo.