React Router'da Router Qo'shish

Routerlar bilan biroz tanishib chiqqanimizdan so'ng, biz ulardan birini ilovamizga qo'shishimiz mumkin.

Ammo avvalo, oldingi darslarda yaratgan ilova shablonimizni biroz tozalashimiz kerak. Aniqrog'i - src papkasiga e'tibor qaratamiz. Undan assets papkasini, App.css, App.jsx fayllarini olib tashlang. Umuman olganda, sizda faqat main.jsx va index.css qoladi.

index.css ni oching va uni butunlay tozalang. U bo'sh bo'lsin.

Endi asosiy main.jsx faylimiz bilan shug'ullanamiz. Unda bizda quyidagi kod bo'ladi:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>

	</React.StrictMode>
);

Endi biz router qo'shishimiz mumkin. Biz BrowserRouter dan foydalanamiz, chunki u veb-ilovalarda eng ko'p qo'llaniladi. Zamonaviy sintaksisni ham unutmang. Import qatorini qo'shamiz:

import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

Keyin, router konstantasini yaratamiz va BrowserRouter ni import qatorlaridan keyin yaratamiz. Buni asosiy sahifada bizga 'Hello Router!' yozuvi ko'rsatiladigan div ko'rsatilishi uchun qilamiz. Buning uchun asosiy sahifaga yo'lni va ko'rsatishimiz kerak bo'lgan elementni yozamiz:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

Biz hali RouterProvider komponentini qo'shishimiz va yuqorida yaratgan routerimizni kiritishimiz kerak. U barcha router ob'ektlarini qabul qiladi, ilovamizni render qiladi va boshqa API'larni ulaydi:

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

To'liq kod quyidagicha ko'rinadi:

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>
);

O'zgarishlarni saqlaymiz. Tabriklayman! Bizning ilova endi xato bermaydi. Endi, agar biz uni ishga tushirsak, brauzerdagi asosiy sahifada biz 'Hello Router!' ni ko'ramiz.

Keltirilgan materialdan foydalanib, oldingi darslar uchun uy vazifalarida yaratgan ilovangizning asosiy sahifasida 'I'm number one in React!' matni bilan paragraf ko'rsatilishini ta'minlang.