Добавление роутера в 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!'.