Vyriešené: Reagujte na opätovné načítanie stránky smerovača nenájdené

Hlavný problém súvisiaci so stránkou opätovného načítania React Router sa nenašiel je, že keď používateľ obnoví stránku, prehliadač sa pokúsi odoslať server požiadavku na aktuálnu adresu URL. Keďže však React Router je smerovanie na strane klienta, neexistuje žiadna zodpovedajúca serverová trasa pre adresu URL, a preto sa vráti chyba 404 Nenájdené. To môže byť obzvlášť problematické, ak používatelia očakávajú, že sa určitý obsah zobrazí pri obnovení.

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// Riadok 1: Tento riadok importuje komponenty BrowserRouter, Route a Switch z knižnice respond-router-dom.

// Riadok 3: Tento riadok definuje funkciu s názvom App, ktorá vracia kód JSX.

// Riadok 5: Tento riadok zabalí celý kód JSX do komponentu smerovača z reakčného smerovača-domu.

// Riadok 6: Tento riadok zabalí všetky cesty do komponentu Switch z reakčného smerovača-domu.

// Riadky 7 – 9: Tieto riadky definujú dve trasy pre '/' a '/about' s príslušnými komponentmi (Domov a O mne).

// Riadky 11 – 12: Tieto riadky definujú trasu, keď sa nezhodujú žiadne iné trasy, čo vykreslí značku h1 s nápisom „Stránka sa nenašla“.

Chyba stránky nenájdená

Chyba Stránka sa nenašla v React Router je chyba, ktorá sa vyskytuje, keď sa používateľ pokúsi o prístup na stránku alebo cestu, ktorá neexistuje. Môže sa to stať, ak používateľ nesprávne zadal adresu URL alebo ak bola stránka, ku ktorej sa pokúšal dostať, odstránená alebo presunutá. V React Router sa táto chyba rieši pomocou vykresľovacia podpera komponentu a odovzdanie funkcie, ktorá vráti stránku 404. To umožňuje vývojárom vytvárať vlastné stránky 404 s ľubovoľným obsahom, ako sú užitočné odkazy alebo správa s ospravedlnením.

Ako zaobchádzať Stránka sa nenašla v routeri reakcie

Keď používate React Router, môžete spracovať stránku, ktorá sa nenašla, vytvorením vlastnej trasy, ktorá vykreslí komponent NotFound, keď sa URL nezhoduje so žiadnou z existujúcich trás. Ak to chcete urobiť, musíte vytvoriť novú trasu s cestou nastavenou na „*“ a vykresliť svoj komponent NotFound.

Napríklad:

} />

Toto sa zhoduje s akoukoľvek adresou URL, ktorá sa ešte nezhoduje s existujúcou cestou, a vykreslí váš komponent NotFound.

Ako prinútim reagujúcu stránku, aby sa znova načítala

V React Router môžete vynútiť opätovné načítanie stránky pomocou metódy nahradzovania objektu histórie. Tým sa aktuálny záznam v zásobníku histórie nahradí novým, čím sa vynúti opätovné načítanie stránky. Ak chcete použiť túto metódu, musíte najprv získať prístup k objektu histórie. Môžete to urobiť tak, že ho odovzdáte ako rekvizitu pri vytváraní komponentu smerovača:

const AppRouter = () => (

{/* Vaše trasy tu */}

);

Keď budete mať prístup k objektu histórie, môžete použiť jeho metódu nahradenia takto:

history.replace('/nejaka-cesta');