Atrisināts: reaģēt maršrutētājam pievienojiet atkāpšanos, lai uztvertu visu

Galvenā problēma, kas saistīta ar React Router un atkāpšanās pievienošanu, lai uztvertu visu, ir tā, ka var būt grūti pareizi konfigurēt atkāpšanās maršrutu. Atkāpšanās maršruts ir jākonfigurē tā, lai tas uztvertu visus pieprasījumus, tostarp tos, kas nav derīgi maršruti. Ja konfigurācija nav veikta pareizi, nederīgu maršrutu pieprasījumi netiks uztverti rezerves maršrutā un var izraisīt kļūdas vai neparedzētu darbību. Turklāt, ja lietojumprogrammā ir dinamiski maršruti (piemēram, pamatojoties uz lietotāja ievadi), tie ir jāņem vērā, konfigurējot atkāpšanās maršrutu, lai tas arī tos uztvertu.

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

// 1. rinda: šī rinda importē komponentus BrowserRouter, Route un Switch no react-router-dom bibliotēkas.
// 2. rinda: šī rinda definē konstanti ar nosaukumu App, kas ir funkcijas komponents.
// 3. rinda: šī rinda atveido maršrutētāja komponentu no react-router-dom.
// 4. rinda: šī rinda atveido komponentu Switch no react-router-dom.
// 5. un 6. rinda: šīs rindas atveido divus maršruta komponentus ar precīziem ceļiem un komponentiem, kas jāatveido, kad šie ceļi ir saskaņoti.
// 8. rindiņa: šī līnija atveido rezerves maršrutu, ja neviens no citiem maršrutiem nav saskaņots. Tas atveidos NoMatch komponentu, ja neviens cits maršruts neatbilst.

Kas ir reaģēt maršrutētājs

React Router ir maršrutēšanas bibliotēka React lietojumprogrammām. Tas ļauj izstrādātājiem izveidot maršrutus un komponentus, kurus var izmantot, lai pārvietotos starp dažādām React lietojumprogrammas lapām. Tas nodrošina arī tādas funkcijas kā dinamiska maršruta saskaņošana, vaicājuma parametri un atrašanās vietas stāvoklis. Turklāt tas nodrošina atbalstu servera puses renderēšanai un koda sadalīšanai.

Vienkāršs rezerves maršruts

Vispārīgais atkāpšanās maršruts ir maršruts React Router, kas atbilst jebkuram ceļam, kas nav saskaņots ar citiem maršrutiem. Šis maršruta veids bieži tiek izmantots, lai izveidotu 404 lapu vai atveidotu komponentu visiem nesaskaņotajiem ceļiem. Ir svarīgi ņemt vērā, ka visaptverošajam atkāpšanās maršrutam vienmēr ir jābūt pēdējam maršrutu saraksta maršrutam, jo ​​tas atbildīs jebkuram ceļam un neļaus saskaņot citus maršrutus.

Kā pareizi definēt rezerves maršrutu

Izmantojot React Router, rezerves maršruts ir maršruts, kas tiek izmantots, ja neviens cits maršruts neatbilst pieprasītajam URL. To parasti izmanto, lai novirzītu lietotājus uz 404. lapu vai kādu citu lapu, ja pieprasītais URL neeksistē.

Lai programmā React Router pareizi definētu rezerves maršrutu, vispirms jāizveido a komponentu un aptiniet to ap saviem maršrutiem. Iekšpusē komponentu, ir jāiekļauj parastie maršruti, kam seko a komponents, kuram nav norādīts ceļš. Šis būs jūsu rezerves maršruts, un tiks uztverti visi pieprasījumi, kas neatbilst nevienam citam jūsu maršrutam. Pēc tam varat norādīt, kas notiks, kad šis maršruts tiek saskaņots, piemēram, novirzīt uz 404 lapu vai parādīt kādu citu saturu.

Kāpēc atkāpšanās maršruts vienmēr tika aktivizēts

Atkāpšanās maršruts programmā React Router vienmēr tiek aktivizēts, ja URL ceļš neatbilst nevienam no esošajiem maršrutiem. Tas var notikt, ja lietotājs manuāli ievada nepareizu URL vai ja lietojumprogrammas maršrutēšanas loģika nav pareizi konfigurēta. Atkāpšanās maršruts ļauj izstrādātājiem graciozi rīkoties ar šiem scenārijiem un sniegt lietotājam atsauksmes, piemēram, 404. lapu vai novirzīt viņu uz sākumlapu.