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

Kun tarvittavat riippuvuudet on asennettu, voidaan kirjasto integroida sovellukseen.

Jotta reititystoiminnallisuus voidaan lisätä sovellukseen, juurikomponentti tulee kääriä `BrowserRouter`-komponenttiin, joka tuodaan `react-router-dom`-kirjastosta. Tämä vaihe on olennainen, koska se alustaa reititysjärjestelmän ja mahdollistaa navigoinnin hallinnan URL-osoitteen perusteella.

## Esimerkki
- Avaa projektin `index.js`-tiedosto;
- Tuo `BrowserRouter`-komponentti `react-router-dom`-kirjastosta:
```js
import { BrowserRouter } from "react-router-dom";
```
- Kääri `App`-komponentti `BrowserRouter`-komponenttiin seuraavasti (rivit 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>
);
```
Käärimällä `App`-komponentti `BrowserRouter`-komponenttiin, reititystoiminnallisuus otetaan käyttöön sovelluksessa.

Opi hallitsemaan navigointia React-sovelluksissa käyttämällä React Routeria. Ymmärrä URL-osoitteiden rakenne ja reitityksen merkitys verkkosovelluksissa. Ota käyttöön React Router monisivuisen sovelluksen luomiseksi, jossa dynaaminen sisältö perustuu URL-polkuun. Hyödynnä edistyneitä ominaisuuksia, kuten kyselymerkkijonoja ja URL-parametreja, sovelluksen tilan ja käyttäjän navigoinnin hallintaan.

Opi teoreettiset perusteet käsitteille kuten URL, verkkotunnus, protokolla, kyselyparametrit ja muut. Ymmärrä reitityksen merkitys verkkosovelluksissa sekä syyt React Router -kirjaston tarpeellisuudelle.

Opi luomaan kokonainen React-sovellus alusta alkaen, jossa sisällön näyttäminen mukautuu URL-osoitteen perusteella React Router -toiminnallisuuden avulla.

Perehdy kyselymerkkijonojen käyttöön sovelluksen tilan jakamisessa ja hallinnassa URL-osoitteiden kautta, työskentele erilaisten tietotyyppien kanssa kyselyparametreissa sekä hyödynnä React Routeria navigointiin ja URL-muutoksiin perustuvien vaikutusten hallintaan.

Reitityksen Käyttöönotto React-sovelluksessa

Esimerkki

Awesome!

Reitityksen Käyttöönotto React-sovelluksessa

Esimerkki