Löst: reagera router lägg till reserv för att fånga alla

Det största problemet med React Router och att lägga till en reservrutt för att fånga allt är att det kan vara svårt att korrekt konfigurera reservrutten. Reservrutten måste konfigureras på ett sådant sätt att den kommer att fånga alla förfrågningar, inklusive de som inte är giltiga rutter. Om konfigurationen inte görs korrekt, kommer förfrågningar om ogiltiga rutter inte att fångas upp av reservrutten och kan resultera i fel eller oväntat beteende. Dessutom, om applikationen innehåller dynamiska rutter (t.ex. baserat på användarinmatning), måste dessa tas med i beräkningen när du konfigurerar reservrutten så att de också fångas av den.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Fallback route */}
      <Route component={NoMatch} /> 

    </Switch>
  </Router>  
);

// Rad 1: Denna rad importerar BrowserRouter, Route och Switch-komponenterna från react-router-dom-biblioteket.
// Rad 2: Denna rad definierar en konstant som kallas App som är en funktionskomponent.
// Linje 3: Denna rad återger routerkomponenten från react-router-dom.
// Rad 4: Denna rad återger Switch-komponenten från react-router-dom.
// Raderna 5 & 6: Dessa rader återger två ruttkomponenter med exakta vägar och komponenter som ska återges när dessa vägar matchas.
// Linje 8: Denna linje återger en reservrutt om ingen av de andra rutterna matchas. Det kommer att återge NoMatch-komponenten om inga andra rutter matchar.

Vad är reager router

React Router är ett routingbibliotek för React-applikationer. Det låter utvecklare skapa rutter och komponenter som kan användas för att navigera mellan olika sidor i en React-applikation. Den tillhandahåller också funktioner som dynamisk ruttmatchning, frågeparametrar och platstillstånd. Dessutom ger det stöd för rendering på serversidan och koddelning.

Allmän reservrutt

En catch-all reservrutt är en rutt i React Router som matchar alla vägar som inte har matchats av några andra rutter. Denna typ av rutt används ofta för att skapa en 404-sida eller för att rendera en komponent för alla omatchade vägar. Det är viktigt att notera att den samlade reservrutten alltid bör vara den sista rutten i listan över rutter, eftersom den kommer att matcha alla vägar och förhindra att andra rutter matchas.

Hur man definierar reservrutt korrekt

När du använder React Router är en reservrutt en rutt som används när inga andra rutter matchar den begärda URL:en. Den används vanligtvis för att omdirigera användare till en 404-sida eller någon annan sida när den begärda webbadressen inte finns.

För att definiera en reservrutt korrekt i React Router bör du först skapa en komponent och linda den runt dina rutter. Inuti komponent, bör du inkludera dina normala rutter följt av en komponent utan angiven sökväg. Detta kommer att vara din reservrutt och kommer att fånga alla förfrågningar som inte matchar någon av dina andra rutter. Du kan sedan ange vad som ska hända när den här rutten matchas, som att omdirigera till en 404-sida eller visa annat innehåll.

Varför reservvägen alltid utlöstes

Reservrutten i React Router utlöses alltid när en URL-sökväg inte matchar någon av de befintliga rutterna. Detta kan hända när en användare manuellt skriver in en felaktig URL, eller om programmets routinglogik inte är korrekt konfigurerad. Reservvägen tillåter utvecklare att hantera dessa scenarier på ett elegant sätt och ge feedback till användaren, till exempel en 404-sida eller omdirigera dem till startsidan.