Atrisināts: React maršrutētāja pārlādēšanas lapa nav atrasta

Galvenā problēma, kas saistīta ar React Router atkārtotas ielādes lapu, nav atrasta, ir tā, ka lietotājam atsvaidzinot lapu, pārlūkprogramma mēģinās serverim pieprasīt pašreizējo URL. Tomēr, tā kā React Router ir klienta puses maršrutēšana, URL nav atbilstoša servera maršruta, un tādējādi tiek atgriezta kļūda 404 Not Found. Tas var būt īpaši problemātiski, ja lietotāji sagaida, ka atsvaidzināšanas laikā tiks parādīts noteikts saturs.

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. rinda: šī rinda importē komponentus BrowserRouter, Route un Switch no react-router-dom bibliotēkas.

// 3. rindiņa: šī rinda definē funkciju ar nosaukumu App, kas atgriež JSX kodu.

// 5. rinda: šajā rindā viss JSX kods ir iekļauts maršrutētāja komponentā no react-router-dom.

// 6. rindiņa: šajā rindā visi maršruti ir iekļauti Switch komponentā no react-router-dom.

// 7.–9. rinda: šīs rindas definē divus maršrutus attiecīgi “/” un “/about” ar to attiecīgajiem komponentiem (Sākums un Par).

// 11.–12. rinda: šīs rindas definē maršrutu, ja neviens cits maršruts nesakrīt, kas atveido h1 tagu ar tekstu “Lapa nav atrasta”.

Lapa nav atrasta kļūda

React Router kļūda lapa nav atrasta ir kļūda, kas rodas, kad lietotājs mēģina piekļūt lapai vai maršrutam, kas neeksistē. Tas var notikt, ja lietotājs ir nepareizi ievadījis URL vai ja lapa, kurai viņš mēģina piekļūt, ir noņemta vai pārvietota. Programmā React Router šī kļūda tiek apstrādāta, izmantojot komponenta renderēšanas rekvizītu un funkcijas nodošanu, kas atgriež 404. lapu. Tas ļauj izstrādātājiem izveidot pielāgotas 404 lapas ar jebkādu saturu, ko viņi vēlas, piemēram, noderīgas saites vai atvainošanās ziņojumu.

Kā rīkoties, lai reaģētu maršrutētājā lapa nav atrasta

Izmantojot React Router, varat apstrādāt lapu, kas nav atrasta, izveidojot pielāgotu maršrutu, kas atveidos NotFound komponentu, ja URL neatbilst nevienam no esošajiem maršrutiem. Lai to izdarītu, jums ir jāizveido jauns maršruts ar ceļu, kas iestatīts uz “*”, un jāatveido NotFound komponents.

Piemēram:

} />

Tas atbildīs jebkuram URL, kas vēl nav saskaņots ar esošu maršrutu, un atveidos jūsu NotFound komponentu.

Kā piespiest reaģējošo lapu atkārtoti ielādēt

Programmā React Router varat piespiest lapu atkārtoti ielādēt, izmantojot vēstures objekta aizstāšanas metodi. Tas aizstās pašreizējo ierakstu vēstures kaudzē ar jaunu, tādējādi liekot atkārtoti ielādēt lapu. Lai izmantotu šo metodi, vispirms ir jāpiekļūst vēstures objektam. To var izdarīt, nododot to kā palīgierīci, veidojot maršrutētāja komponentu:

const AppRouter = () => (

{/* Jūsu maršruti šeit */}

);

Kad jums ir piekļuve vēstures objektam, varat izmantot tā aizstāšanas metodi, piemēram:

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