Megoldva: React router újratöltési oldal nem található

A React Router újratöltési oldalának nem található problémájával kapcsolatos fő probléma az, hogy amikor a felhasználó frissíti az oldalt, a böngésző megkísérli kérni a szervert az aktuális URL-címre. Mivel azonban a React Router kliensoldali útválasztás, nincs megfelelő kiszolgálói útvonal az URL-hez, és így 404-es nem található hibaüzenet jelenik meg. Ez különösen akkor jelenthet problémát, ha a felhasználók bizonyos tartalmak megjelenését várják frissítéskor.

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. sor: Ez a sor importálja a BrowserRouter, Route és Switch összetevőket a react-router-dom könyvtárból.

// 3. sor: Ez a sor egy App nevű függvényt határoz meg, amely JSX kódot ad vissza.

// 5. sor: Ez a sor a teljes JSX kódot a react-router-dom Router komponensbe csomagolja.

// 6. sor: Ez a sor az összes útvonalat a react-router-dom Switch komponensébe foglalja.

// 7–9. sor: Ezek a sorok két útvonalat határoznak meg a '/' és a '/about' számára a megfelelő összetevőkkel (Home és About).

// 11-12. sor: Ezek a sorok egy útvonalat határoznak meg arra az esetre, ha más útvonalak nem egyeznek meg, ami egy h1 címkét jelenít meg a következővel: „Az oldal nem található”.

Az oldal nem található hiba

Az oldal nem található hiba a React Routerben egy olyan hiba, amely akkor fordul elő, amikor a felhasználó nem létező oldalhoz vagy útvonalhoz próbál hozzáférni. Ez akkor fordulhat elő, ha a felhasználó rosszul írta be az URL-t, vagy ha az elérni kívánt oldalt eltávolították vagy áthelyezték. A React Routerben ezt a hibát a komponens render prop és egy függvény átadása, amely 404-es oldalt ad vissza. Ez lehetővé teszi a fejlesztők számára, hogy egyéni 404-es oldalakat hozzanak létre bármilyen tartalommal, például hasznos linkekkel vagy bocsánatkérő üzenettel.

Hogyan kezelhetem az oldalt nem találom a react routerben

A React Router használatakor a nem található oldalt egyéni útvonal létrehozásával kezelheti, amely egy NotFound összetevőt jelenít meg, ha az URL nem egyezik a meglévő útvonalak egyikével sem. Ehhez létre kell hoznia egy új útvonalat, amelynek elérési útja „*”-ra van állítva, és elő kell írnia a NotFound összetevőt.

Például:

} />

Ez megfelel minden olyan URL-nek, amely még nem egyezik meg egy meglévő útvonallal, és megjeleníti a NotFound összetevőt.

Hogyan kényszeríthetek egy reagáló oldalt az újratöltésre

A React Routerben az előzményobjektum csere metódusával kényszerítheti az oldal újratöltését. Ez lecseréli az előzményverem jelenlegi bejegyzését egy újra, így az oldal újratöltését kényszeríti ki. A módszer használatához először hozzá kell férnie az előzményobjektumhoz. Ezt úgy teheti meg, hogy az útválasztó összetevő létrehozásakor segédeszközként adja át:

const AppRouter = () => (

{/* Az Ön útvonalai itt */}

);

Miután hozzáfért az előzményobjektumhoz, használhatja a csere metódusát, például:

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