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:

import { BrowserRouter } from "react-router-dom";

• Kääri App-komponentti BrowserRouter-komponenttiin seuraavasti (rivit 9-11):

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.