Vyriešené: reagujte na router a pridajte záložný kód, aby ste zachytili všetko

Hlavným problémom súvisiacim so smerovačom React Router a pridaním záložnej metódy na zachytenie všetkého je, že môže byť ťažké správne nakonfigurovať záložnú cestu. Záložná trasa musí byť nakonfigurovaná tak, aby zachytila ​​všetky požiadavky vrátane tých, ktoré nie sú platnými trasami. Ak sa konfigurácia nevykoná správne, požiadavky na neplatné trasy nebudú zachytené záložnou cestou a môžu viesť k chybám alebo neočakávanému správaniu. Okrem toho, ak aplikácia obsahuje dynamické trasy (napr. na základe užívateľského vstupu), potom je potrebné ich vziať do úvahy pri konfigurácii záložnej trasy, aby boli ňou tiež zachytené.

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

// Riadok 1: Tento riadok importuje komponenty BrowserRouter, Route a Switch z knižnice respond-router-dom.
// Riadok 2: Tento riadok definuje konštantu s názvom App, ktorá je funkčným komponentom.
// Riadok 3: Tento riadok vykresľuje komponent Router z reakcie-router-dom.
// Riadok 4: Tento riadok vykresľuje komponent Switch z reakcie-router-dom.
// Riadky 5 a 6: Tieto riadky vykreslia dva komponenty Route s presnými cestami a komponenty, ktoré sa majú vykresliť, keď sa tieto cesty zhodujú.
// Riadok 8: Tento riadok vykreslí záložnú trasu, ak sa nezhoduje žiadna z ostatných trás. Vykreslí komponent NoMatch, ak sa nezhodujú žiadne iné trasy.

Čo je to reagovať router

React Router je smerovacia knižnica pre aplikácie React. Umožňuje vývojárom vytvárať trasy a komponenty, ktoré možno použiť na navigáciu medzi rôznymi stránkami v aplikácii React. Poskytuje tiež funkcie, ako je dynamické priraďovanie trasy, parametre dopytu a stav polohy. Okrem toho poskytuje podporu pre vykresľovanie na strane servera a delenie kódu.

Záložná trasa catch all

Záložná trasa catch-all je trasa v React Router, ktorá sa zhoduje s akoukoľvek cestou, ktorá sa nezhoduje so žiadnymi inými trasami. Tento typ trasy sa často používa na vytvorenie stránky 404 alebo na vykreslenie komponentu pre všetky nezhodné cesty. Je dôležité poznamenať, že univerzálna záložná trasa by mala byť vždy poslednou trasou v zozname trás, pretože sa bude zhodovať s akoukoľvek cestou a zabráni priradeniu iných trás.

Ako správne definovať záložnú trasu

Keď používate React Router, záložná trasa je trasa, ktorá sa používa, keď žiadne iné trasy nezodpovedajú požadovanej URL. Zvyčajne sa používa na presmerovanie používateľov na stránku 404 alebo inú stránku, keď požadovaná adresa URL neexistuje.

Aby ste správne definovali záložnú trasu v React Router, mali by ste najprv vytvoriť a komponent a omotajte ho okolo vašich trás. Vnútri komponentu, mali by ste zahrnúť svoje bežné trasy, po ktorých nasleduje a komponent bez určenej cesty. Toto bude vaša záložná trasa a zachytí všetky požiadavky, ktoré sa nezhodujú so žiadnou z vašich iných trás. Potom môžete určiť, čo sa má stať, keď sa táto trasa zhoduje, ako napríklad presmerovanie na stránku 404 alebo zobrazenie iného obsahu.

Prečo sa vždy spustila záložná trasa

Záložná trasa v React Router sa vždy spustí, keď sa cesta URL nezhoduje so žiadnou z existujúcich trás. Môže sa to stať, keď používateľ manuálne zadá nesprávnu adresu URL alebo ak logika smerovania aplikácie nie je správne nakonfigurovaná. Záložná trasa umožňuje vývojárom zvládnuť tieto scenáre elegantne a poskytnúť používateľovi spätnú väzbu, napríklad stránku 404 alebo ich presmerovať na domovskú stránku.