Pagrindinio maršruto kūrimas React Router

Pagrindinis maršrutas, vedantis į pagrindinį puslapį, dažnai vadinamas šakniniu (root route), kadangi kiti maršrutai bus atvaizduojami jo viduje. Labai patogu jį pateikti kaip atskirą komponentą. Todėl vėl paimkime mūsų programą ir src aplanke sukurkime dar vieną ir pavadinkime ją routes. Dabar šiame aplanke sukursime failą root.jsx atskiram React komponentui Root. Kodas faile atrodys taip:

function Root() {
	return <div>Sveiki, Maršrute!</div>;
}

export default Root;

O dabar atlikime pakeitimus main.jsx faile, kadangi kaip element reikšmę dabar perduosime komponentą Root, o jo turinys dabar yra atskirame faile root.jsx:

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

Nepamirškime importuoti mūsų komponento main.jsx faile:

import Root from './routes/root';

Atidarykite programą, kurią sukūrėte užduotyse ankstesnėse pamokose. Sukurkite šakniniam maršrutui atskirą React komponentą Root atskirame faile root.jsx, kaip aprašyta šioje pamokoje. Atlikite pakeitimus savo main.jsx faile.