Išspręsta: reaguoja maršrutizatorius, pridėkite atsarginę dalį, kad sugautumėte viską

Pagrindinė problema, susijusi su „React Router“ ir atsarginio elemento pridėjimu, kad būtų galima viską sugauti, yra ta, kad gali būti sunku tinkamai sukonfigūruoti atsarginį maršrutą. Atsarginis maršrutas turi būti sukonfigūruotas taip, kad jis gautų visas užklausas, įskaitant tas, kurios nėra tinkami maršrutai. Jei konfigūracija atlikta neteisingai, užklausos dėl netinkamų maršrutų nebus gaudomi atsarginiu maršrutu ir gali sukelti klaidų arba netikėto elgesio. Be to, jei programoje yra dinaminių maršrutų (pvz., remiantis vartotojo įvestimi), į juos reikia atsižvelgti konfigūruojant atsarginį maršrutą, kad jie taip pat būtų sugauti.

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 eilutė: ši eilutė importuoja BrowserRouter, Route ir Switch komponentus iš react-router-dom bibliotekos.
// 2 eilutė: ši eilutė apibrėžia konstantą, vadinamą programa, kuri yra funkcijos komponentas.
// 3 eilutė: ši eilutė pateikia maršrutizatoriaus komponentą iš react-router-dom.
// 4 eilutė: ši eilutė pateikia komponentą Switch iš react-router-dom.
// 5 ir 6 eilutės: šios eilutės pateikia du maršruto komponentus su tiksliais keliais ir komponentais, kurie turi būti pateikti, kai tie keliai sutampa.
// 8 eilutė: ši eilutė pateikia atsarginį maršrutą, jei nėra suderintų kitų maršrutų. Jis pateiks NoMatch komponentą, jei jokie kiti maršrutai nesutampa.

Kas yra react maršrutizatorius

„React Router“ yra „React“ programų maršruto parinkimo biblioteka. Tai leidžia kūrėjams kurti maršrutus ir komponentus, kuriuos galima naudoti norint naršyti tarp skirtingų „React“ programos puslapių. Jame taip pat yra tokių funkcijų kaip dinaminis maršruto atitikimas, užklausos parametrai ir vietos būsena. Be to, jis palaiko serverio atvaizdavimą ir kodo skaidymą.

Atsarginis maršrutas „Sugauti viską“.

Atsarginis maršrutas yra „React Router“ maršrutas, atitinkantis bet kurį kelią, kuris nebuvo suderintas su jokiais kitais maršrutais. Šio tipo maršrutas dažnai naudojamas kuriant 404 puslapį arba pateikiant komponentą visiems nesuderintam keliams. Svarbu pažymėti, kad atsarginis maršrutas visada turi būti paskutinis maršrutų sąraše, nes jis atitiks bet kurį kelią ir neleis suderinti kitų maršrutų.

Kaip tinkamai apibrėžti atsarginį maršrutą

Kai naudojate „React Router“, atsarginis maršrutas yra maršrutas, kuris naudojamas, kai jokie kiti maršrutai neatitinka prašomo URL. Paprastai jis naudojamas naudotojams peradresuoti į 404 puslapį ar kitą puslapį, kai prašomo URL nėra.

Norėdami tinkamai apibrėžti atsarginį maršrutą „React Router“, pirmiausia turėtumėte sukurti a komponentą ir apvyniokite jį aplink savo maršrutus. Viduje komponentą, turėtumėte įtraukti įprastus maršrutus, po kurių a komponentas nenurodytas kelias. Tai bus jūsų atsarginis maršrutas ir bus užfiksuotos visos užklausos, kurios neatitinka kitų maršrutų. Tada galite nurodyti, kas turėtų nutikti, kai šis maršrutas bus suderintas, pvz., nukreipti į 404 puslapį arba rodyti kitą turinį.

Kodėl atsarginis maršrutas visada buvo suaktyvintas

Atsarginis maršrutas „React Router“ visada suaktyvinamas, kai URL kelias neatitinka nė vieno iš esamų maršrutų. Taip gali nutikti, kai vartotojas rankiniu būdu įveda neteisingą URL arba jei programos maršruto parinkimo logika nėra tinkamai sukonfigūruota. Atsarginis maršrutas leidžia kūrėjams dailiai tvarkyti šiuos scenarijus ir pateikti vartotojui grįžtamąjį ryšį, pvz., 404 puslapį arba nukreipti juos į pagrindinį puslapį.

Susijusios naujienos:

Palikite komentarą