Přidání routeru do React Router

Po krátkém seznámení s routery můžeme jeden z nich přidat do aplikace.

Nejprve však musíme trochu vyčistit šablonu naší aplikace, kterou jsme vytvořili v předchozích lekcích. Konkrétně se zaměříme na složku src. Vyhoďte z ní složku assets, soubory App.css, App.jsx. Obecně vám v ní zůstanou pouze main.jsx a index.css.

Otevřete index.css a úplně jej vyčistěte. Ať je prázdný.

Nyní se pustíme do našeho hlavního souboru main.jsx. Bude v něm následující 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 nyní můžeme přidat router. Použijeme BrowserRouter, protože se nejčastěji používá v webových aplikacích. Nezapomeneme na moderní syntaxi. Přidáme řádek importu:

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

Poté založíme konstantu router a vytvoříme náš BrowserRouter po řádcích s importem. Uděláme to tak, aby na hlavní stránce se zobrazoval div s nápisem 'Hello Router!'. Pro tento účel nastavíme cestu k hlavní stránce a prvek, který se bude zobrazovat:

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

Ještě potřebujeme přidat komponentu RouterProvider a vložit vytvořený router výše. Přijímá všechny objekty routeru, renderuje naši aplikaci a připojuje další API:

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

Úplný kód bude vypadat 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 změny. Gratuluji! Naše aplikace již nehlásí chyby. Nyní, pokud ji spustíme, tak na hlavní stránce v prohlížeči uvidíme 'Hello Router!'.