Lahendatud: reageerimisruuteri uuesti laadimise lehte ei leitud

Peamine probleem, mis on seotud React Routeri uuesti laadimise lehe leidmata jätmisega, on see, et kui kasutaja lehte värskendab, proovib brauser esitada serverile praeguse URL-i päringu. Kuna React Router on aga kliendipoolne marsruutimine, puudub URL-i jaoks vastav serveri marsruut ja seega tagastatakse tõrketeade 404 Not Found. See võib olla eriti problemaatiline, kui kasutajad eeldavad, et värskendamisel ilmub teatud sisu.

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. rida: see rida impordib komponendid BrowserRouter, Route ja Switch teegist react-router-dom.

// Rida 3: see rida määratleb funktsiooni nimega App, mis tagastab JSX-koodi.

// 5. rida: see rida mähib kogu JSX-koodi ruuteri komponendiks alates react-router-dom.

// Rida 6: see rida koondab kõik marsruudid react-router-dom komponendi Switch-i.

// Read 7–9: need read määratlevad kaks marsruuti vastavalt '/' ja '/about' jaoks koos nende vastavate komponentidega (Kodu ja Teave).

// Read 11–12: need read määravad marsruudi, kui ükski teine ​​marsruut ei sobi, mis renderdab h1 sildi, mis ütleb: "Lehekülge ei leitud".

Lehekülge ei leitud viga

Viga Lehekülge ei leitud rakenduses React Router on tõrge, mis ilmneb siis, kui kasutaja üritab pääseda lehele või marsruudile, mida pole olemas. See võib juhtuda, kui kasutaja on URL-i valesti sisestanud või kui leht, millele ta üritab juurde pääseda, on eemaldatud või teisaldatud. React Routeris käsitletakse seda tõrget kasutades komponendi renderdusrekvisiit ja funktsiooni edastamine, mis tagastab 404 lehekülje. See võimaldab arendajatel luua kohandatud 404 lehti mis tahes sisuga, nagu kasulikud lingid või vabandussõnum.

Kuidas käsitleda lehekülge ei leitud React ruuteris

React Routeri kasutamisel saate käsitleda lehte, mida ei leitud, luues kohandatud marsruudi, mis renderdab komponendi NotFound, kui URL ei ühti ühegi olemasoleva marsruudiga. Selleks peate looma uue marsruudi, mille teeks on määratud “*”, ja renderdama oma NotFoundi komponendi.

Näiteks:

} />

See ühtib kõigi URL-idega, mis ei kattu juba olemasoleva marsruudiga, ja renderdab teie komponendi NotFound.

Kuidas sundida reageerivat lehte uuesti laadima

Rakenduses React Router saate sundida lehte uuesti laadima, kasutades ajalooobjektil asendusmeetodit. See asendab ajaloovirna praeguse kirje uuega, sundides seega lehte uuesti laadima. Selle meetodi kasutamiseks peate esmalt saama juurdepääsu ajalooobjektile. Saate seda teha, kui edastate selle ruuteri komponendi loomisel rekvisiidina:

const AppRouter = () => (

{/* Teie marsruudid siin */}

);

Kui teil on juurdepääs ajalooobjektile, saate kasutada selle asendusmeetodit järgmiselt:

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