React Router-da Routerin əlavə edilməsi

Routerlərlə bir az tanış olduqdan sonra, onlardan birini tətbiqimizə əlavə edə bilərik.

Lakin əvvəlcə əvvəlki dərslərdə yaratdığımız tətbiq şablonumuzu bir az təmizləməliyik. Daha dəqiqi - src qovluğu ilə məşğul olacağıq. Ondan assets qovluğunu, App.css, App.jsx fayllarını atın. Ümumiyyətlə, içində yalnız main.jsx və index.css qalacaq.

index.css faylını açın və onu tamamilə təmizləyin. Boş qalsın.

İndi əsas faylımızla - main.jsx ilə məşğul olaq. Onunda bu cür kod olacaq:

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

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

	</React.StrictMode>
);

İndi biz router əlavə edə bilərik. Biz BrowserRouter istifadə edəcəyik, çünki o, veb-tətbiqlərdə ən çox istifadə olunur. Müasir sintaksisi də unutmayaq. İmport sətrini əlavə edək:

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

Sonra, router sabitini təyin edək və import sətirlərindən sonra BrowserRouter yaradaq. Bunu elə edək ki, əsas səhifədə 'Hello Router!' yazısı olan div görünsün. Bunun üçün əsas səhifənin yolunu və göstərəcəyimiz elementi təyin edək:

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

Biz həmçinin RouterProvider komponentini əlavə etməli və yuxarıda yaratdığımız routeri ona ötürməliyik. O, bütün router obyektlərini qəbul edir, tətbiqimizi render edir və digər API-leri birləşdirir:

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

Tam kod belə görünəcək:

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

Dəyişiklikləri yadda saxlayaq. Təbriklər! Bizim tətbiqimiz artıq səhv vermir. İndi, əgər biz onu işə salsaq, brauzerdə əsas səhifədə 'Hello Router!' görəcəyik.

Verilmiş materialdan istifadə edərək, əvvəlki dərslər üçün ev tapşırıqlarında yaratdığınız tətbiqin əsas səhifəsində 'I'm number one in React!' mətnli abzasın görünməsini təmin edin.