Pridanie routeru do React Router

Po krátkom oboznámení sa s routermi, môžeme jeden z nich pridať do aplikácie.

Ale najprv musíme trochu vyčistiť šablónu našej aplikácie, ktorú sme vytvorili na predchádzajúcich lekciách. Konkrétne - budeme sa venovať priečinku src. Vyhoďte z neho priečinok assets, súbory App.css, App.jsx. Vo všeobecnosti by vám v ňom mali zostať len main.jsx a index.css.

Otvorte index.css a úplne ho vyčistite. Nech je prázdny.

Teraz sa budeme venovať nášmu hlavnému súboru main.jsx. Bude mať takýto kód:

main.jsximport './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>

  </React.StrictMode>
);

A teraz môžeme pridať router. Použijeme BrowserRouter, pretože sa najčastejšie používa v webových aplikáciách. Nezabudnime na modernú syntax. Pridajme riadok importu:

main.jsximport {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';

Potom vytvoríme konštantu router a vytvoríme náš BrowserRouter po riadkoch s importom. Urobíme to tak, aby na hlavnej stránke sa nám zobrazoval div s nápisom 'Hello Router!'. Preto zadáme cestu k hlavnej stránke a element, ktorý budeme zobrazovať:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <div>Hello Router!</div>,
  },
]);

Ešte potrebujeme pridať komponent RouterProvider a vložiť vytvorený router vyššie. Prijíma všetky objekty routeru, vykresľuje našu aplikáciu a pripája ďalšie API:

main.jsxReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Úplný kód bude vyzerať takto:

main.jsximport './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <div>Hello world!</div>,
  },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Uložme zmeny. Gratulujem! Naša aplikácia už nehlási chyby. Teraz, ak ju spustíme, na hlavnej stránke v prehliadači uvidíme 'Hello Router!'.