Додавање рутера у React Router

Након што смо се кратко упознали са рутерима, можемо да додамо један у нашу апликацију.

Али прво морамо да мало почистимо шаблон наше апликације, који смо направили на претходним часама. Конкретније - позабавићемо се фолдером src. Избаците из њега фолдер assets, фајлове App.css, App.jsx. Укратко, у њему ће вам остати само main.jsx и index.css.

Отворите index.css и потпуно га очистите. Нека буде празан.

Сада ћемо се позабавити нашим главним фајлом main.jsx. У њему ћемо имати овакав код:

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

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

	</React.StrictMode>
);

А сада можемо да додамо рутер. Користићемо BrowserRouter, јер се он најчешће користи у веб апликацијама. Нећемо заборавити ни на савремени синтакс. Додајмо линију увоза:

import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

Затим, направићемо константу router и креирати наш BrowserRouter после линија са увозом. Урадићемо то тако да на главној страници буде приказан див са натписом 'Hello Router!'. За то ћемо навести пут до главне странице и елемент који ћемо приказати:

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

Треба да додамо и компонент RouterProvider и упишемо горе направљени рутер. Он прихвата све објекте рутера, рендерује нашу апликацију и повезује друге API-је:

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

Потпуни код ће изгледати овако:

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>
);

Сачувајмо измене. Честитам! Наша апликација више не приказује грешке. Сада, ако је покренемо, на главној страници у претраживачу видећемо 'Hello Router!'.

Користећи дати материјал, уредите вашу апликацију, коју сте направили у домаћим задацима за претходне часове, тако да на главној страници буде приказан пасус са текстом 'I'm number one in React!'.