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!' намоиш дода шавад.