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!' матни билан параграф кўриниши учун қилинг.