Löst: reagera routerns omladdningssida hittades inte

Det största problemet med att React Router-omladdningssidan inte hittades är att när en användare uppdaterar sidan kommer webbläsaren att försöka göra en begäran till servern om den aktuella URL:en. Men eftersom React Router är routing på klientsidan, finns det ingen motsvarande serverväg för URL:en och därför returneras ett 404 Not Found-fel. Detta kan vara särskilt problematiskt om användare förväntar sig att visst innehåll ska visas vid uppdatering.

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

// Rad 1: Denna rad importerar BrowserRouter, Route och Switch-komponenterna från react-router-dom-biblioteket.

// Rad 3: Denna rad definierar en funktion som heter App som returnerar JSX-kod.

// Rad 5: Denna rad lindar in hela JSX-koden i en routerkomponent från react-router-dom.

// Rad 6: Denna rad lindar alla rutter i en Switch-komponent från react-router-dom.

// Linjer 7 – 9: Dessa linjer definierar två rutter för '/' respektive '/about' med sina respektive komponenter (Hem och Om).

// Raderna 11 – 12: Dessa rader definierar en rutt för när inga andra rutter matchar, vilket återger en h1-tagg som säger "Sidan hittades inte".

Sidan hittades inte fel

Sidan hittades inte fel i React Router är ett fel som uppstår när en användare försöker komma åt en sida eller rutt som inte finns. Detta kan hända om användaren har skrivit fel URL, eller om sidan de försöker komma åt har tagits bort eller flyttats. I React Router hanteras detta fel genom att använda komponentens rendering prop och skickar in en funktion som returnerar en 404-sida. Detta gör att utvecklare kan skapa anpassade 404-sidor med vilket innehåll de vill, till exempel användbara länkar eller ett ursäktmeddelande.

Hur hanterar jag Sidan hittades inte i reager router

När du använder React Router kan du hantera en sida som inte hittas genom att skapa en anpassad rutt som renderar en NotFound-komponent när URL:en inte matchar någon av de befintliga rutterna. För att göra detta måste du skapa en ny rutt med sökvägen inställd på "*" och rendera din NotFound-komponent.

Till exempel:

} />

Detta kommer att matcha alla webbadresser som inte redan matchas av en befintlig rutt och rendera din NotFound-komponent.

Hur tvingar jag en reagerande sida att laddas om

I React Router kan du tvinga en sida att laddas om genom att använda ersättningsmetoden på historikobjektet. Detta kommer att ersätta den nuvarande posten i historikstacken med en ny, vilket tvingar fram en omladdning av sidan. För att använda den här metoden måste du först få tillgång till historikobjektet. Du kan göra detta genom att skicka det som en rekvisita när du skapar din routerkomponent:

const AppRouter = () => (

{/* Dina rutter hit */}

);

När du har tillgång till historikobjektet kan du använda dess ersättningsmetod så här:

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