Megoldva: React router add backback, hogy mindent elkapjon

A React Routerrel és egy tartalék hozzáadásával kapcsolatos fő probléma az, hogy nehéz lehet a tartalék útvonalat megfelelően konfigurálni. A tartalék útvonalat úgy kell konfigurálni, hogy minden kérést elkapjon, beleértve azokat is, amelyek nem érvényes útvonalak. Ha a konfigurációt nem végzik el megfelelően, akkor az érvénytelen útvonalra vonatkozó kéréseket nem fogja el a tartalék útvonal, és ez hibákhoz vagy váratlan viselkedéshez vezethet. Ezenkívül, ha az alkalmazás dinamikus útvonalakat tartalmaz (pl. felhasználói bevitel alapján), akkor ezeket figyelembe kell venni a tartalék útvonal konfigurálásakor, hogy azokat is elkapja.

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. sor: Ez a sor importálja a BrowserRouter, Route és Switch összetevőket a react-router-dom könyvtárból.
// 2. sor: Ez a sor egy App nevű állandót határoz meg, amely egy függvénykomponens.
// 3. sor: Ez a sor a Router összetevőt jeleníti meg a react-router-dom fájlból.
// 4. sor: Ez a sor a Switch összetevőt jeleníti meg a react-router-dom fájlból.
// 5. és 6. sor: Ezek a sorok két útvonal-összetevőt jelenítenek meg pontos útvonalakkal, valamint az útvonalak egyeztetésekor megjelenítendő összetevőkkel.
// 8. sor: Ez a sor tartalék útvonalat jelenít meg, ha a többi útvonal egyike sem illeszkedik. Megjeleníti a NoMatch komponenst, ha nincs más útvonal.

Mi az a react router

A React Router egy útválasztási könyvtár a React alkalmazásokhoz. Lehetővé teszi a fejlesztők számára, hogy útvonalakat és összetevőket hozzanak létre, amelyek segítségével navigálhatnak a React alkalmazás különböző oldalai között. Olyan funkciókat is biztosít, mint például a dinamikus útvonalillesztés, a lekérdezési paraméterek és a hely állapota. Ezenkívül támogatja a szerveroldali megjelenítést és a kódfelosztást.

Mindenre kiterjedő tartalék útvonal

A mindenre kiterjedő tartalék útvonal egy olyan útvonal a React Routerben, amely megfelel bármely olyan útvonalnak, amelyhez más útvonalak nem egyeztek meg. Ezt az útvonaltípust gyakran használják 404-es oldal létrehozására vagy egy komponens megjelenítésére az összes páratlan útvonalhoz. Fontos megjegyezni, hogy a mindenre kiterjedő tartalék útvonalnak mindig az utolsó útvonalnak kell lennie az útvonalak listájában, mivel az bármely útvonalhoz illeszkedik, és megakadályozza, hogy más útvonalak illeszkedjenek.

Hogyan határozzuk meg megfelelően a tartalék útvonalat

A React Router használatakor a tartalék útvonal egy olyan útvonal, amelyet akkor használnak, ha egyetlen másik útvonal sem egyezik a kért URL-lel. Általában a felhasználók átirányítására szolgál egy 404-es oldalra vagy más oldalra, amikor a kért URL nem létezik.

A tartalék útvonal megfelelő meghatározásához a React Routerben először létre kell hoznia a összetevőt, és tekerje körbe az útvonalakon. Benne komponenst, meg kell adnia a normál útvonalakat, majd a komponens, amelynek elérési útja nincs megadva. Ez lesz a tartalék útvonal, és minden olyan kérést elkap, amely nem egyezik a többi útvonallal. Ezután megadhatja, hogy mi történjen az útvonal egyeztetésekor, például átirányítás egy 404-es oldalra vagy más tartalom megjelenítése.

Miért vált mindig a tartalék útvonal?

A React Router tartalék útvonala mindig aktiválódik, ha egy URL-útvonal nem egyezik a meglévő útvonalak egyikével sem. Ez akkor fordulhat elő, ha a felhasználó manuálisan ír be egy helytelen URL-t, vagy ha az alkalmazás útválasztási logikája nincs megfelelően konfigurálva. A tartalék útvonal lehetővé teszi a fejlesztők számára, hogy kecsesen kezeljék ezeket a forgatókönyveket, és visszajelzést adjanak a felhasználónak, például egy 404-es oldalt vagy átirányítsák őket a kezdőlapra.