Добавяне на рутер в 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 след редовете с импорт. Ще направим това така, че на главната страница да се показва div с надпис '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!'.