Nalutas: hindi nahanap ang pahina ng pag-reload ng router ng reaksyon

Ang pangunahing problema na nauugnay sa pahina ng pag-reload ng React Router na hindi natagpuan ay kapag ang isang gumagamit ay nag-refresh ng pahina, ang browser ay susubukan na gumawa ng isang kahilingan sa server para sa kasalukuyang URL. Gayunpaman, dahil ang React Router ay client-side routing, walang katumbas na ruta ng server para sa URL at sa gayon ay ibinalik ang isang 404 Not Found error. Maaari itong maging partikular na may problema kung ang mga user ay umaasa sa ilang partikular na nilalaman na lalabas sa pag-refresh.

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

// Linya 1: Ini-import ng linyang ito ang mga bahagi ng BrowserRouter, Route, at Switch mula sa library ng react-router-dom.

// Linya 3: Tinutukoy ng linyang ito ang isang function na tinatawag na App na nagbabalik ng JSX code.

// Linya 5: Binabalot ng linyang ito ang buong JSX code sa isang bahagi ng Router mula sa react-router-dom.

// Linya 6: Binabalot ng linyang ito ang lahat ng ruta sa isang bahagi ng Switch mula sa react-router-dom.

// Mga Linya 7 – 9: Tinutukoy ng mga linyang ito ang dalawang ruta para sa '/' at '/about' ayon sa pagkakasunod-sunod sa kani-kanilang mga bahagi (Home at About).

// Mga Linya 11 – 12: Tinutukoy ng mga linyang ito ang isang ruta kung kailan walang iba pang mga ruta ang tumutugma, na nagre-render ng h1 tag na nagsasabing "Hindi natagpuan ang pahina."

Hindi nakitang error ang page

Ang page not found error sa React Router ay isang error na nangyayari kapag sinubukan ng user na i-access ang page o rutang wala. Maaaring mangyari ito kung mali ang pagkaka-type ng user sa URL, o kung naalis o inilipat ang page na sinusubukan nilang i-access. Sa React Router, ang error na ito ay hinahawakan sa pamamagitan ng paggamit ng render prop ng component at pagpasa sa isang function na nagbabalik ng 404 na pahina. Nagbibigay-daan ito sa mga developer na lumikha ng custom na 404 na pahina na may anumang nilalaman na gusto nila, tulad ng mga kapaki-pakinabang na link o isang mensahe ng paghingi ng tawad.

Paano ko hahawakan ang Page not found Sa react router

Kapag gumagamit ng React Router, maaari mong pangasiwaan ang isang page na hindi nahanap sa pamamagitan ng paggawa ng custom na ruta na magre-render ng NotFound component kapag hindi tumugma ang URL sa alinman sa mga kasalukuyang ruta. Para magawa ito, kailangan mong gumawa ng bagong ruta na may path na nakatakda sa “*” at i-render ang iyong NotFound component.

Halimbawa:

} />

Tutugma ito sa anumang URL na hindi pa tumutugma sa isang kasalukuyang ruta at ire-render ang iyong NotFound component.

Paano ko pipilitin na i-reload ang isang tumutugon na pahina

Sa React Router, maaari mong pilitin ang isang pahina na i-reload sa pamamagitan ng paggamit ng paraan ng pagpapalit sa object ng kasaysayan. Papalitan nito ang kasalukuyang entry sa history stack ng bago, kaya pinipilit na i-reload ang page. Upang magamit ang pamamaraang ito, kailangan mo munang makakuha ng access sa object ng kasaysayan. Magagawa mo ito sa pamamagitan ng pagpasa nito bilang prop kapag gumagawa ng iyong bahagi ng router:

const AppRouter = () => (

{/* Iyong mga ruta dito */}

);

Sa sandaling mayroon ka nang access sa object ng kasaysayan, maaari mong gamitin ang paraan ng pagpapalit nito tulad nito:

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