Дабаўленне роўтара ў React Router

Крыху азнаёміўшыся з роўтарамі, мы можам дадаць адзін з іх у прыкладанне.

Але для початку нам трэба крыху пачысціць шаблон нашага прыкладання, які мы стварылі на мінулых занятках. А канкрэтней - займемся папачкай src. Выкіньце з яе папку assets, файлы App.css, App.jsx. Увогуле, у вас застануцца ў ёй толькі main.jsx і index.css.

Адкрыйце index.css і поўнасцю яго ачысціце. Хай ён будзе пустым.

Цяпер займемся нашым галоўным файлам main.jsx. У ім у нас будзе такi код:

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!'. Для гэтага пропiшам шлях да галоўнай старонкі і элемент, які будзем адлюстроўваць:

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