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:

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

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

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

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

Úplný kód bude vypadat 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 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!'.

Pomocí uvedeného materiálu zaříděte, aby na hlavní stránce vaší aplikace, kterou jste vytvořili v domácích úkolech k předchozím lekcím, se vám zobrazoval odstavec s textem 'I'm number one in React!'.