Nå som vi har pakket inn appen vår med BrowserRouter for å aktivere routing, er neste steg å spesifisere rutene (stiene) appen vår skal inkludere. Disse rutene bestemmer den overordnede strukturen til appen og kontrollerer hvilket innhold som vises basert på URL-en.

React Router tilbyr to essensielle komponenter for å definere ruter: Routes og Route. Routes-komponenten fungerer som en beholder for alle rutedefinisjoner, mens Route-komponenten representerer en spesifikk rutekonfigurasjon.

Her er syntaksen for å 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 strukturen:

• <path_value>: Spesifiserer URL-konfigurasjonen for ruten;
• <component_to_render>: Bestemmer hvilken komponent som skal vises når en bruker navigerer til den spesifikke stien.

Eksempel

La oss anvende dette konseptet i prosjektet vårt. Åpne App.jsx-filen og importer Routes- og Route-komponentene fra react-router-dom-biblioteket:

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

Definer rutene for appen vår i return-setningen til App-komponenten:

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 komponenten fungerer som en beholder for å definere ruter i applikasjonen, og fungerer som en overordnet komponent for individuelle rutedefinisjoner;
• Linje 5: <Route>: Representerer en rutedefinisjon. Den spesifiserer at når URL-stien samsvarer med /, skal komponenten <HomePage /> vises;
• Linje 6: <Route>: Definerer en annen rute. Når URL-stien samsvarer med /about, vil komponenten <AboutPage /> vises;
• Linje 7: <Route>: Definerer en annen rute. Når URL-stien samsvarer med /contacts, vil <ContactsPage />-komponenten vises.