Ռուտերի ավելացում 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!' տեքստով: