Nu hvor vi har omsluttet vores app med BrowserRouter for at aktivere routing, er det næste skridt at specificere de ruter (stier), som vores app skal indeholde. Disse ruter bestemmer appens overordnede struktur og styrer, hvilket indhold der vises baseret på URL'en.

React Router tilbyder to essentielle komponenter til at definere ruter: Routes og Route. Routes-komponenten fungerer som en container for alle rutedefinitioner, mens Route-komponenten repræsenterer en specifik rutekonfiguration.

Her er syntaksen for at definere ruter:

<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 denne struktur:

• <path_value>: Angiver URL-konfigurationen for ruten;
• <component_to_render>: Bestemmer den komponent, der skal vises, når en bruger navigerer til den specifikke sti.

Eksempel

Lad os anvende dette koncept i vores projekt. Åbn filen App.jsx og importer Routes og Route komponenterne fra react-router-dom biblioteket:

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

Inden for return-udtrykket i App-komponenten defineres ruterne for vores app:

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

Kodeforklaring:

• Linje 4, 8: <Routes>: Denne komponent fungerer som en container til at definere ruter i applikationen og fungerer som forælderkomponent for individuelle rutedefinitioner;
• Linje 5: <Route>: Repræsenterer en rutedefinition. Den angiver, at når URL-stien matcher /, skal komponenten <HomePage /> vises;
• Linje 6: <Route>: Definerer en anden rute. Når URL-stien matcher /about, vil komponenten <AboutPage /> blive vist;
• Linje 7: <Route>: Definerer en anden rute. Når URL-stien matcher /contacts, vil <ContactsPage />-komponenten blive vist.