Løst: reload ruter-siden ble ikke funnet

Hovedproblemet knyttet til React Router reload side ikke funnet er at når en bruker oppdaterer siden, vil nettleseren forsøke å sende en forespørsel til serveren om gjeldende URL. Men siden React Router er ruting på klientsiden, er det ingen tilsvarende serverrute for URL-en og dermed returneres en 404 Not Found-feil. Dette kan være spesielt problematisk hvis brukere forventer at bestemt innhold skal vises ved oppdatering.

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

// Linje 1: Denne linjen importerer BrowserRouter-, Route- og Switch-komponentene fra react-router-dom-biblioteket.

// Linje 3: Denne linjen definerer en funksjon kalt App som returnerer JSX-kode.

// Linje 5: Denne linjen pakker inn hele JSX-koden i en ruterkomponent fra react-router-dom.

// Linje 6: Denne linjen omslutter alle rutene i en Switch-komponent fra react-router-dom.

// Linje 7 – 9: Disse linjene definerer to ruter for henholdsvis '/' og '/about' med sine respektive komponenter (Hjem og Om).

// Linje 11 – 12: Disse linjene definerer en rute for når ingen andre ruter matcher, noe som gjengir en h1-tag som sier "Siden ikke funnet".

Siden ble ikke funnet feil

Side ikke funnet feil i React Router er en feil som oppstår når en bruker forsøker å få tilgang til en side eller rute som ikke eksisterer. Dette kan skje hvis brukeren har skrevet feil URL, eller hvis siden de prøver å få tilgang til er fjernet eller flyttet. I React Router håndteres denne feilen ved å bruke komponentens gjengivelsespropp og passerer inn en funksjon som returnerer en 404-side. Dette lar utviklere lage tilpassede 404-sider med det innholdet de ønsker, for eksempel nyttige lenker eller en unnskyldningsmelding.

Hvordan håndterer jeg siden ikke funnet i reager-ruteren

Når du bruker React Router, kan du håndtere en side som ikke er funnet ved å lage en tilpasset rute som vil gjengi en NotFound-komponent når URL-en ikke samsvarer med noen av de eksisterende rutene. For å gjøre dette må du opprette en ny rute med banen satt til "*" og gjengi NotFound-komponenten.

For eksempel:

} />

Dette vil samsvare med alle nettadresser som ikke allerede samsvarer med en eksisterende rute og gjengi NotFound-komponenten.

Hvordan tvinger jeg en reagerende side til å laste inn på nytt

I React Router kan du tvinge en side til å lastes på nytt ved å bruke erstatningsmetoden på historieobjektet. Dette vil erstatte den nåværende oppføringen i historiestabelen med en ny, og dermed tvinge en ny innlasting av siden. For å bruke denne metoden må du først få tilgang til historieobjektet. Du kan gjøre dette ved å sende det som en rekvisitt når du oppretter ruterkomponenten din:

const AppRouter = () => (

{/* Rutene dine her */}

);

Når du har tilgang til historieobjektet, kan du bruke erstatningsmetoden slik:

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