Lära Definiera Rutter för Navigering | Implementera React Router i en React-App

Nu när vi har omslutit vår app med BrowserRouter för att möjliggöra routing, är nästa steg att specificera de rutter (sökvägar) som vår app ska innehålla. Dessa rutter bestämmer appens övergripande struktur och styr vilket innehåll som visas baserat på URL:en.

React Router tillhandahåller två viktiga komponenter för att definiera rutter: Routes och Route. Routes-komponenten fungerar som en behållare för alla ruttdefinitioner, medan Route-komponenten representerar en specifik ruttkonfiguration.

Här är syntaxen för att definiera rutter:

<Routes>
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
</Routes>

I denna struktur:

<path_value>: Anger URL-konfigurationen för rutten;
<component_to_render>: Bestämmer vilken komponent som ska renderas när en användare navigerar till den specifika sökvägen.

Exempel

Låt oss tillämpa detta koncept i vårt projekt. Öppna filen App.jsx och importera komponenterna Routes och Route från biblioteket react-router-dom:

import { Routes, Route } from "react-router-dom";

Definiera rutterna för vår app inom return-satsen i App-komponenten:

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contacts" element={<ContactsPage />} />
      </Routes>
    </>
  );
};

Kodförklaring:

Rad 4, 8: <Routes>: Denna komponent fungerar som en behållare för att definiera rutter i applikationen och agerar som föräldrakomponent för individuella ruttdefinitioner;
Rad 5: <Route>: Representerar en ruttdefinition. Den anger att när URL-sökvägen matchar /, ska komponenten <HomePage /> renderas;
Rad 6: <Route>: Definierar en annan rutt. När URL-sökvägen matchar /about, kommer komponenten <AboutPage /> att renderas;
Rad 7: <Route>: Definierar en annan rutt. När URL-sökvägen matchar /contacts, kommer komponenten <ContactsPage /> att renderas.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 4

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

Can you explain how to create the HomePage, AboutPage, and ContactsPage components?

What happens if a user navigates to a path that isn't defined in the routes?

Can you show how to add navigation links to switch between these routes?

Awesome!

Completion rate improved to 4.17

Svep för att visa menyn