Išspręsta: react maršrutizatoriaus perkrovimo puslapis nerastas

Pagrindinė problema, susijusi su „React Router“ pakartotinio įkėlimo puslapis nerastas, yra ta, kad kai vartotojas atnaujina puslapį, naršyklė bandys pateikti serveriui užklausą dėl dabartinio URL. Tačiau kadangi „React Router“ yra kliento pusės maršrutizatorius, URL nėra atitinkamo serverio maršruto, todėl pateikiama klaida 404 nerasta. Tai gali būti ypač problematiška, jei vartotojai tikisi, kad atnaujinus bus rodomas tam tikras turinys.

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

// 1 eilutė: ši eilutė importuoja BrowserRouter, Route ir Switch komponentus iš react-router-dom bibliotekos.

// 3 eilutė: ši eilutė apibrėžia funkciją, vadinamą App, kuri grąžina JSX kodą.

// 5 eilutė: ši eilutė apvynioja visą JSX kodą maršrutizatoriaus komponente iš react-router-dom.

// 6 eilutė: ši eilutė aptraukia visus maršrutus perjungimo komponente iš react-router-dom.

// 7–9 eilutės: šios eilutės apibrėžia du maršrutus atitinkamai „/“ ir „/apie“ su atitinkamais komponentais (Pagrindinis ir Apie).

// 11–12 eilutės: šios eilutės apibrėžia maršrutą, kai nesutampa jokie kiti maršrutai, o tai pateikia h1 žymą, kurioje sakoma „Puslapis nerastas“.

Puslapis nerastas klaida

„React Router“ klaida puslapis nerastas yra klaida, kuri atsiranda, kai vartotojas bando pasiekti puslapį arba maršrutą, kurio nėra. Taip gali nutikti, jei vartotojas neteisingai įvedė URL arba jei puslapis, kurį jis bando pasiekti, buvo pašalintas arba perkeltas. React Router ši klaida išsprendžiama naudojant komponento atvaizdavimo rekvizitas ir funkcijos, kuri grąžina 404 puslapį, perdavimą. Tai leidžia kūrėjams sukurti pasirinktinius 404 puslapius su bet kokiu norimu turiniu, pvz., naudingomis nuorodomis ar atsiprašymo pranešimu.

Kaip elgtis su puslapio nerasta React maršrutizatoriuje

Kai naudojate „React Router“, galite tvarkyti puslapį, kuris nerastas, sukurdami pasirinktinį maršrutą, kuris pateiks „NotFound“ komponentą, kai URL neatitiks nė vieno iš esamų maršrutų. Norėdami tai padaryti, turite sukurti naują maršrutą, kurio kelias yra „*“, ir pateikti „NotFound“ komponentą.

Pavyzdžiui:

} />

Tai atitiks bet kurį URL, kuris dar neatitinka esamo maršruto, ir pateiks jūsų NotFound komponentą.

Kaip priversti reaguojantį puslapį įkelti iš naujo

React Router galite priversti puslapį įkelti iš naujo, naudodami istorijos objekto pakeitimo metodą. Tai pakeis dabartinį istorijos krūvos įrašą nauju, taip priversdamas puslapį įkelti iš naujo. Norėdami naudoti šį metodą, pirmiausia turite gauti prieigą prie istorijos objekto. Tai galite padaryti perduodami jį kaip rekvizitą kurdami maršrutizatoriaus komponentą:

const AppRouter = () => (

{/* Jūsų maršrutai čia */}

);

Kai turėsite prieigą prie istorijos objekto, galite naudoti jo pakeitimo metodą, pavyzdžiui:

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