Ratkaistu: reagoi reititin lisää varaosia saadaksesi kaikki kiinni

Suurin ongelma, joka liittyy React Routeriin ja varaosan lisäämiseen kaiken saattamiseksi kiinni, on, että varareitin oikea määrittäminen voi olla vaikeaa. Varareitti on määritettävä siten, että se havaitsee kaikki pyynnöt, myös ne, jotka eivät ole kelvollisia reittejä. Jos konfigurointia ei tehdä oikein, varareitti ei jää kiinni virheellisten reittien pyyntöihin, ja ne voivat johtaa virheisiin tai odottamattomaan toimintaan. Lisäksi, jos sovellus sisältää dynaamisia reittejä (esim. käyttäjän syötteeseen perustuvia), ne on otettava huomioon varareittiä määritettäessä, jotta ne myös jäävät kiinni.

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

// Rivi 1: Tämä rivi tuo BrowserRouter-, Route- ja Switch-komponentit react-router-dom-kirjastosta.
// Rivi 2: Tämä rivi määrittää vakion nimeltä App, joka on funktiokomponentti.
// Rivi 3: Tämä rivi tekee React-router-domista Router-komponentin.
// Rivi 4: Tämä rivi tekee Switch-komponentin osoitteesta react-router-dom.
// Rivit 5 ja 6: Nämä rivit renderöivät kaksi reittikomponenttia tarkalla polulla ja komponenteilla, jotka hahmonnetaan, kun polut täsmäävät.
// Rivi 8: Tämä rivi näyttää varareitin, jos muita reittejä ei löydy. Se hahmontaa NoMatch-komponentin, jos muita reittejä ei täsmää.

Mikä on reagoida reititin

React Router on React-sovellusten reitityskirjasto. Sen avulla kehittäjät voivat luoda reittejä ja komponentteja, joiden avulla voidaan navigoida React-sovelluksen eri sivujen välillä. Se tarjoaa myös ominaisuuksia, kuten dynaamisen reittisovituksen, kyselyparametrit ja sijainnin tilan. Lisäksi se tukee palvelinpuolen hahmontamista ja koodin jakamista.

Varareitti saa kaiken irti

Keräilyvarareitti on React Routerin reitti, joka vastaa mitä tahansa polkua, jota ei ole vastannut millään muulla reitillä. Tämän tyyppistä reittiä käytetään usein 404-sivun luomiseen tai komponentin hahmontamiseen kaikille vertaamattomille poluille. On tärkeää huomata, että keräilyvarareitin tulee aina olla viimeinen reitti reittiluettelossa, koska se vastaa mitä tahansa polkua ja estää muiden reittien yhdistämisen.

Kuinka määritellä varareitti oikein

React Routeria käytettäessä varareitti on reitti, jota käytetään, kun mikään muu reitti ei vastaa pyydettyä URL-osoitetta. Sitä käytetään yleensä ohjaamaan käyttäjiä 404-sivulle tai jollekin muulle sivulle, kun pyydettyä URL-osoitetta ei ole olemassa.

Jos haluat määrittää varareitin oikein React Routerissa, sinun tulee ensin luoda a komponentti ja kääri se reittiesi ympärille. Sisällä komponentti, sinun tulee sisällyttää normaalit reitit ja sen jälkeen a komponentti, jolle ei ole määritetty polkua. Tämä on varareittisi, ja se havaitsee kaikki pyynnöt, jotka eivät vastaa muita reittejäsi. Voit sitten määrittää, mitä pitäisi tapahtua, kun tämä reitti osuu, kuten uudelleenohjauksen 404-sivulle tai jonkin muun sisällön näyttämisen.

Miksi varareitti aina laukaistiin

Varareitti React Routerissa käynnistyy aina, kun URL-polku ei vastaa mitään olemassa olevista reiteistä. Tämä voi tapahtua, kun käyttäjä kirjoittaa manuaalisesti väärän URL-osoitteen tai jos sovelluksen reitityslogiikka ei ole oikein määritetty. Varareitin avulla kehittäjät voivat käsitellä näitä skenaarioita sulavasti ja antaa käyttäjälle palautetta, kuten 404-sivun tai uudelleenohjauksen kotisivulle.