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:

import './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:

import {
	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ť:

const 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:

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

Úplný kód bude vyzerať takto:

import './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!'.

Pomocou uvedeného materiálu urobte tak, aby na hlavnej stránke vašej aplikácie, ktorú ste vytvorili v domácich úlohách k predchádzajúcim lekciám, sa vám zobrazoval odsek s textom 'I'm number one in React!'.