რაუტერის დამატება 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 იმპორტების შემდეგ. გავაკეთოთ ეს ისე, რომ მთავარ გვერდზე გამოჩნდეს div ტექსტით '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!'.