Hur man använder React Router V6: en nybörjarguide

React Router är det mest populära biblioteket du kan använda för att implementera routing i React-applikationer. Det ger en komponentbaserad metod för att hantera en mängd olika routningsuppgifter, inklusive sidnavigering, frågeparametrar och många fler.

React Router version 6 innehåller betydande ändringar av routingalgoritmen för att rätta till brister i tidigare iterationer av programvaran och leverera ett mer avancerat och effektivt system för hantering av routing.

Getting Started With Routing Using React Router V6

För att påbörja processen kan du antingen skapa en React-applikation eller konfigurera ett React-projekt med Vite som utvecklingsserver. När projektet har upprättats fortsätter du med att introducera biblioteket react-router-dom i projektets beroenden.

 npm install react-router-dom 

Skapa rutter med React Router

Att kapsla in hela applikationen i en BrowserRouter komponent är ett effektivt sätt att skapa rutter. För att uppnå detta, vänligen uppdatera de relevanta JavaScript-filerna som index.jsx eller main.jsx . Genom att införliva de föreslagna ändringarna kommer du att ha etablerat en grund för routing i din applikation.

 import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
)

Genom att använda BrowserRouter-omslaget runt programkomponenten får du full tillgång till de routingfunktioner och möjligheter som tillhandahålls av React Router-biblioteket, vilket omfattar hela programmet.

Använda Routes-komponenten

När din applikation har omslutits av BrowserRouter-komponenten är det möjligt att avgränsa routningskonfigurationen.

Routes-komponenten utgör ett betydande framsteg jämfört med sin föregångare, Switch-komponenten, när det gäller funktionalitet inom React Router. Denna komponent har stöd för relativ routing, vilket möjliggör smidiga övergångar mellan olika delar av applikationen; den har också automatisk ruttrankning, vilket säkerställer att användarna dirigeras till det mest relevanta innehållet baserat på deras navigeringshistorik; dessutom kan den hantera kapslade rutter, vilket gör att utvecklare enkelt kan skapa komplexa hierarkier av sidor.

I allmänhet definieras rutter vanligtvis i den översta komponenten i en applikation, t.ex. App-komponenten. Placeringen kan dock variera beroende på den specifika organisationsstrukturen i ett projekt.

Öppna filen “App.jsx” som finns i din projektkatalog och ersätt den React-standardkod som finns i den med mallen nedan:

 import './App.css'
import { Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import About from './pages/About';

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </>
  )
}

export default App 

Den ovannämnda routningsinställningen leder angivna URL-sökvägar till deras respektive sidelement, nämligen Dashboard och About, vilket garanterar att applikationen visar rätt element när den nås via en specifik URL-adress.

Tänk på funktionaliteten hos egenskapen “element” som finns i komponenten Route, som gör det möjligt att förmedla en funktionell komponent snarare än att bara identifiera dess beteckning. Ett sådant arrangemang möjliggör överföring av egenskaper genom routade sökvägar och deras motsvarande element.

I källmappen skapar du en ny katalogsektion med namnet “pages” och införlivar sedan två nya filer med titlarna “Dashboard.jsx” och “About.jsx”. Använd dessa filer för att experimentera med olika rutter.

Använda createBrowserRouter för att definiera routrar

I React Routers dokumentation rekommenderas att använda komponenten createBrowserRouter för att definiera routningskonfigurationen för React-webbapplikationer. Denna komponent är ett lättviktigt alternativ till BrowserRouter som tar en array av vägar som sitt argument.

Genom att införliva detta element elimineras kravet på ruttdefinition inom App-komponenten. Det är möjligt att upprätta alla ruttkonfigurationer i antingen index.jsx- eller main.jsx-filen istället.

Visst, här är en förfinad återgivning av det uttalandet:scssLåt oss till exempel överväga ett scenario där man använder detta element:

 import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from './App.jsx'
import Dashboard from './pages/Dashboard';
import About from './pages/About';


const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/dashboard",
    element: <Dashboard />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
); 

Användningen av createBrowserRouter och RouterProvider komponenter underlättar upprättandet av en routningsinfrastruktur i en React-baserad applikation, och utnyttjar deras kapacitet för att effektivt styra användarnas navigering genom de olika sammankopplade sidorna eller funktionerna i programmet.

I denna specifika implementering finns en skillnad från det konventionella tillvägagångssättet där BrowserRouter-komponenten kapslar in hela applikationen. Istället används komponenten RouterProvider för att förmedla routerkontexten till varje beståndsdel i programvaran med hjälp av dess providence.

Implementera Page-Not-Found Routes

Funktionen hos path prop i samband med React Routers Route komponent ligger i dess förmåga att utföra en jämförelse mellan den angivna sökvägen och den aktuella URL:en, med det slutliga målet att avgöra om de är i linje eller inte för att framgångsrik navigering ska uppstå.

För att hantera fall där inga tillgängliga vägar matchas är det möjligt att skapa en särskild väg som specifikt hanterar “404 Page Not Found”-fel. Genom att införliva en sådan väg blir det möjligt för slutanvändare att få begripliga svar under omständigheter där de försöker komma åt en ogiltig URL.

För att kunna införliva en 404-väg i programmet måste du inkludera den i RouteComponent enligt följande:

 // using the Route component
<Route path="*" element={<NotFound />} />

 // using createBrowserRouter
{ path: "*", element: <NotFound />, }, 

Vi kommer att skapa en anpassad NotFound komponent som utökar Reacts inbyggda NotFoundRouteComponent . Vi kommer sedan att använda denna komponent för att rendera när en begärd sida inte hittas på servern. För att uppnå detta måste vi först installera Axios för att göra API-förfrågningar och utforma våra komponenter med CSS-moduler. Slutligen kommer vi att importera och använda dessa paket i vår kod.

Asterisken (*) fungerar som en platshållare för alla tecken i ett reguljärt uttryck, vilket gör det möjligt att hantera fall där ingen specifik rutt har matchats med den angivna URL-adressen.

Programmatisk navigering med hjälp av useNavigate Hook

Användningen av useNavigate hook presenterar en instrumentell metod för att hantera navigering inom programvaruapplikationer. Denna hook är särskilt fördelaktig vid navigering i samband med användarinitierade åtgärder eller händelser, inklusive knapptryckningar och formulärinlämningar.

Man måste faktiskt skaffa kroken utilizeNavigate från det uppskattade React Router-paketet för att underlätta navigeringsoperationer genom implementeringen av den funktionella komponenten About.jsx.

 import { useNavigate } from 'react-router-dom'; 

Införliva ett användargränssnittselement i applikationslayouten, som när det aktiveras omdirigerar användaren till en angiven sökväg.

 function About() {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    navigate("/");
  };

  return (
    <>
      // Rest of the code ...
      <button onClick={handleButtonClick}>
    </>
  );
}

export default About; 

Det är viktigt att notera att även om useNavigate-kroken och useNavigation-kroken, som båda introducerades i React Router version 6, har liknande namnkonventioner, så har de olika funktioner och syften.

Användningen av useNavigation kroken ger en tillgång till relevant information om navigering, inklusive aktuell navigeringsstatus och olika ytterligare detaljer. Sådan funktionalitet kan vara till nytta vid rendering av användargränssnittskomponenter, t.ex. laddningsindikatorer, som ger en visuell representation av pågående operationer.

Här är en förfinad återgivning av det angivna exemplet som visar implementeringen av useNavigation-kroken:

 import { useNavigation } from "react-router-dom";

function SubmitButton() {
  const navigation = useNavigation();

  const buttonText =
    navigation.state === "submitting"
      ? "Saving..."
      : navigation.state === "loading"
        ? "Saved!"
        : "Go";

  return <button type="submit">{buttonText}</button>;
} 

Det angivna kodavsnittet visar en React-funktionell komponent som heter “SubmitButton”, som använder den anpassade kroken “useNavigation” för att få det aktuella navigeringstillståndet. Detta gör att knappens etikett kan uppdateras dynamiskt som svar på förändringar i användarens interaktion med applikationen.

Trots deras olika funktioner är det möjligt att använda både “useNavigate”- och “useNavigation”-krokarna tillsammans. Den förra fungerar som en initieringsmekanism för navigeringsprocesser medan den senare ger tillgång till live navigeringsdata som avgör vilken typ av användargränssnittsfeedback som ska visas i webbläsarmiljön.

Använda useRoutes-kroken

Den här kroken gör det möjligt att specificera ruttvägar tillsammans med deras korrelerande komponenter på ett omfattande sätt, vilket underlättar processen att matcha rutter och visa de relevanta komponenterna på ett konsekvent sätt.

Här är en elegant illustration som visar hur detta verktyg kan användas:

 import { useRoutes } from 'react-router-dom';
import Dashboard from './Dashboard';
import About from './About';

const routes = [
  {
    path: '/',
    element: <Dashboard/>,
  },
  {
    path: '/about',
    element: <About />,
  },
];

function App() {
  const routeResult = useRoutes(routes);
  return routeResult;
}

export default App; 

Objektet routes fungerar som en medlare mellan URL:erna och deras motsvarande komponenter i applikationen. Genom att använda detta objekt kan App-komponenten framgångsrikt mappa den aktuella URL:en till respektive komponent genom att utnyttja den matchningsprocess som upprättats genom de definierade rutterna.

Genom att utnyttja den här funktionen får du en exakt hantering av din routningsarkitektur, vilket underlättar utvecklingen av skräddarsydda mekanismer för routningshantering för dina specifika applikationskrav.

Hantering av routning i React-applikationer

React erbjuder i sig ingen lösning för att hantera navigering i en applikation, men React Router är utformad specifikt för att tillgodose detta behov genom att tillhandahålla en omfattande uppsättning routningskomponenter och funktioner som underlättar skapandet av mycket responsiva och intuitiva gränssnitt. Genom att använda dessa funktioner kan utvecklare bygga applikationer med sömlösa navigeringsfunktioner och samtidigt säkerställa optimal användarupplevelse.