Rešeno: strani za ponovno nalaganje usmerjevalnika React ni bilo mogoče najti

Glavna težava, povezana s tem, da stran za ponovno nalaganje usmerjevalnika React ni bila najdena, je ta, da ko uporabnik osveži stran, bo brskalnik poskusil strežniku poslati zahtevo za trenutni URL. Ker pa je React Router usmerjanje na strani odjemalca, za URL ni ustrezne strežniške poti, zato se vrne napaka 404 Not Found. To je lahko še posebej problematično, če uporabniki pričakujejo, da se bo določena vsebina prikazala ob osvežitvi.

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

// Vrstica 1: Ta vrstica uvozi komponente BrowserRouter, Route in Switch iz knjižnice react-router-dom.

// Vrstica 3: Ta vrstica definira funkcijo, imenovano App, ki vrne kodo JSX.

// Vrstica 5: Ta vrstica ovije celotno kodo JSX v komponento usmerjevalnika iz react-router-dom.

// Vrstica 6: Ta vrstica ovije vse poti v komponento Switch iz react-router-dom.

// Vrstice 7 – 9: Te vrstice določajo dve poti za '/' in '/about' s svojimi ustreznimi komponentami (Home in About).

// Vrstice 11–12: Te vrstice določajo pot, ko se nobena druga pot ne ujema, kar upodobi oznako h1 z napisom »Stran ni najdena«.

Napaka strani ni najdena

Napaka strani ni najdena v React Router je napaka, ki se pojavi, ko uporabnik poskuša dostopati do strani ali poti, ki ne obstaja. To se lahko zgodi, če je uporabnik napačno vnesel URL ali če je bila stran, do katere poskuša dostopati, odstranjena ali premaknjena. V React Router se ta napaka obravnava z uporabo komponento za upodabljanje in posredovanje funkcije, ki vrne stran 404. To omogoča razvijalcem, da ustvarijo strani 404 po meri s poljubno vsebino, kot so koristne povezave ali sporočilo z opravičilom.

Kako ravnam s stranjo, ki ni bila najdena v usmerjevalniku React

Ko uporabljate React Router, lahko stran, ki ni najdena, obravnavate tako, da ustvarite pot po meri, ki bo upodobila komponento NotFound, ko se URL ne ujema z nobeno od obstoječih poti. Če želite to narediti, morate ustvariti novo pot s potjo, nastavljeno na »*«, in upodobiti svojo komponento NotFound.

Na primer:

} />

To bo ustrezalo kateremu koli URL-ju, ki se še ne ujema z obstoječo potjo, in upodobilo vašo komponento NotFound.

Kako prisilim stran, ki se odzove, da se znova naloži

V React Routerju lahko prisilite stran, da se znova naloži z uporabo metode zamenjave na predmetu zgodovine. To bo zamenjalo trenutni vnos v skladu zgodovine z novim in tako prisililo ponovno nalaganje strani. Če želite uporabiti to metodo, morate najprej pridobiti dostop do predmeta zgodovine. To lahko storite tako, da ga posredujete kot prop pri ustvarjanju komponente usmerjevalnika:

const AppRouter = () => (

{/* Vaše poti tukaj */}

);

Ko imate dostop do predmeta zgodovine, lahko uporabite njegovo metodo zamenjave tako:

history.replace('/some-route');