Summary  
This chapter explains how to enable client-side routing in a React application by wrapping the root component with the BrowserRouter component from react-router-dom.

General domain of usage  
Single-page web applications

Zodra de benodigde afhankelijkheden zijn geïnstalleerd, kan de bibliotheek in de applicatie worden geïntegreerd.

Om routeringsfunctionaliteit aan de applicatie toe te voegen, moet het rootcomponent worden omwikkeld met `BrowserRouter` uit de `react-router-dom` bibliotheek. Deze stap is essentieel omdat hiermee het routeringssysteem wordt geïnitialiseerd en navigatie op basis van de URL mogelijk wordt gemaakt.

## Voorbeeld
- Open het bestand `index.js` in het project;
- Importeer het `BrowserRouter` component uit de `react-router-dom` bibliotheek:
```js
import { BrowserRouter } from "react-router-dom";
```
- Omwikkel het `App` component met het `BrowserRouter` component, zoals hieronder weergegeven (regel 9-11):
```jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App/App";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);
```
Door het `App` component te omwikkelen met `BrowserRouter`, wordt routeringsfunctionaliteit beschikbaar gemaakt in de applicatie.

Leer hoe je navigatie beheert in React-applicaties met behulp van React Router. Begrijp de structuur van URL's en de rol van routing in webapplicaties. Stel React Router in om multi-pagina-applicaties te creëren met dynamische inhoud op basis van URL-paden. Werk met geavanceerde functies zoals querystrings en URL-parameters om applicatiestatus en gebruikersnavigatie te beheren.

Leer de theoretische basis van concepten zoals URL, domein, protocol, queryparameters en meer. Begrijp het belang van routing in webapplicaties en waarom de React Router-bibliotheek nodig is.

Ontdek hoe u een volledige React-applicatie vanaf nul kunt maken, met de mogelijkheid om inhoud weer te geven die zich aanpast op basis van de URL met behulp van React Router-functionaliteit.

Verken het gebruik van querystrings voor het delen en beheren van applicatiestatus via URL's, werk met verschillende gegevenstypen in queryparameters en benut React Router voor navigatie en effecten op basis van URL-wijzigingen.

Routing Inschakelen in een React-App

Voorbeeld

Awesome!

Routing Inschakelen in een React-App

Voorbeeld