Արմատային երթուղու ստեղծում React Router-ում

Հաճախ հիմնական երթուղին, որը տանում է դեպի գլխավոր էջ, կոչվում է արմատային (root route), քանի որ մյուս երթուղիները կրենդերվելու են նրա ներսում: Շատ հարմար է այն ներկայացնել որպես առանձին կոմպոնենտ: Ուստի եկեք նորից վերցնենք մեր հավելվածը եւ src պանակում ստեղծենք մեկ այլ եւ անվանենք այն routes: Հիմա այս պանակում ստեղծենք root.jsx ֆայլը React-ի առանձին Root կոմպոնենտի համար: Կոդը ֆայլում կունենա հետևյալ տեսքը.

function Root() {
	return <div>Բարեւ Router!</div>;
}

export default Root;

Եվ հիմա եկեք փոփոխություններ մտցնենք main.jsx ֆայլի կոդի հատվածում, քանի որ element-ի արժեքով մենք հիմա կփոխանցենք Root կոմպոնենտը, իսկ նրա պարունակությունն այժմ գտնվում է root.jsx առանձին ֆայլում.

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
	},
]);

Չմոռանանք մեր կոմպոնենտի իմպորտի տողը main.jsx-ում.

import Root from './routes/root';

Բացեք ձեր կողմից նախորդ դասերին առաջադրանքներում ստեղծված հավելվածը: Ստեղծեք արմատային երթուղու համար առանձին React կոմպոնենտ Root root.jsx առանձին ֆայլում, ինչպես նկարագրված է այս դասում: Կատարեք փոփոխություններ ձեր main.jsx ֆայլում: