Nu we onze app hebben omwikkeld met BrowserRouter om routing mogelijk te maken, is de volgende stap het specificeren van de routes (paden) die onze app zal bevatten. Deze routes bepalen de algemene structuur van de app en regelen welke inhoud wordt weergegeven op basis van de URL.

React Router biedt twee essentiële componenten voor het definiëren van routes: Routes en Route. De Routes-component fungeert als container voor alle routedefinities, terwijl de Route-component een specifieke routeconfiguratie vertegenwoordigt.

Hier is de syntaxis voor het definiëren van routes:

<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>

In deze structuur:

• <path_value>: Specificeert de URL-configuratie voor de route;
• <component_to_render>: Bepaalt welke component wordt weergegeven wanneer een gebruiker naar dat specifieke pad navigeert.

Voorbeeld

Laten we dit concept toepassen op ons project. Open het bestand App.jsx en importeer de componenten Routes en Route uit de bibliotheek react-router-dom:

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

Definieer binnen de return-verklaring van de App-component de routes voor onze app:

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

Uitleg van de code:

• Regel 4, 8: <Routes>: Deze component dient als container voor het definiëren van routes in de applicatie en fungeert als bovenliggende component voor individuele routedefinities;
• Regel 5: <Route>: Vertegenwoordigt een routedefinitie. Het specificeert dat wanneer het URL-pad overeenkomt met /, de component <HomePage /> moet worden weergegeven;
• Regel 6: <Route>: Definieert een andere route. Wanneer het URL-pad overeenkomt met /about, wordt de component <AboutPage /> weergegeven;
• Regel 7: <Route>: Definieert een andere route. Wanneer het URL-pad overeenkomt met /contacts, wordt de component <ContactsPage /> weergegeven.