Løst: React router reload side ikke fundet

Hovedproblemet relateret til React Router-genindlæsningssiden er ikke fundet, er, at når en bruger opdaterer siden, vil browseren forsøge at sende en anmodning til serveren om den aktuelle URL. Men da React Router er routing på klientsiden, er der ingen tilsvarende serverrute for URL'en, og derfor returneres en 404 Not Found-fejl. Dette kan især være problematisk, hvis brugere forventer, at bestemt indhold vises ved opdatering.

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 linje importerer BrowserRouter-, Route- og Switch-komponenterne fra react-router-dom-biblioteket.

// Linje 3: Denne linje definerer en funktion kaldet App, som returnerer JSX-kode.

// Linje 5: Denne linje ombryder hele JSX-koden i en router-komponent fra react-router-dom.

// Linje 6: Denne linje ombryder alle ruterne i en Switch-komponent fra react-router-dom.

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

// Linje 11 – 12: Disse linjer definerer en rute, når ingen andre ruter matcher, hvilket gengiver et h1-tag, der siger "Side ikke fundet".

Siden blev ikke fundet fejl

Side ikke fundet fejl i React Router er en fejl, der opstår, når en bruger forsøger at få adgang til en side eller rute, der ikke eksisterer. Dette kan ske, hvis brugeren har indtastet URL'en forkert, eller hvis den side, de forsøger at få adgang til, er blevet fjernet eller flyttet. I React Router håndteres denne fejl ved at bruge komponentens gengivelsesprop og passerer en funktion, der returnerer en 404-side. Dette giver udviklere mulighed for at oprette tilpassede 404-sider med det indhold, de ønsker, såsom nyttige links eller en undskyldningsbesked.

Hvordan håndterer jeg Side ikke fundet i reagerende router

Når du bruger React Router, kan du håndtere en side, der ikke er fundet, ved at oprette en brugerdefineret rute, der vil gengive en NotFound-komponent, når URL'en ikke matcher nogen af ​​de eksisterende ruter. For at gøre dette skal du oprette en ny rute med stien sat til "*" og gengive din NotFound-komponent.

For eksempel:

} />

Dette vil matche enhver URL, der ikke allerede matches af en eksisterende rute, og gengive din NotFound-komponent.

Hvordan tvinger jeg en reagerende side til at genindlæse

I React Router kan du tvinge en side til at genindlæse ved at bruge erstatningsmetoden på historieobjektet. Dette vil erstatte den aktuelle post i historiestakken med en ny, hvilket tvinger en genindlæsning af siden. For at bruge denne metode skal du først have adgang til historieobjektet. Du kan gøre dette ved at overføre det som en rekvisit, når du opretter din routerkomponent:

const AppRouter = () => (

{/* Dine ruter her */}

);

Når du har adgang til historieobjektet, kan du bruge dets erstatningsmetode som sådan:

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