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

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

routes/root.jsxfunction Root() {
  return <div>Բարեւ Router!</div>;
}

export default Root;

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

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

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

main.jsximport Root from './routes/root';