Krijimi i Rrugës Kryesore në React Router

Shpesh rruga kryesore, që çon në faqen kryesore, quhet rruga rrënjësore (root route), pasi rrugët e tjera do të renderen brenda saj. Është shumë e përshtatshme ta paraqesim atë si një komponent të veçantë. Prandaj, le të marrim përsëri aplikacionin tonë dhe në dosjen src të krijojmë një tjetër dhe ta quajmë routes. Tani në këtë dosje le të krijojmë skedarin root.jsx për komponentin e veçantë React Root. Kodi në skedar do të duket kështu:

function Root() {
	return <div>Hello Router!</div>;
}

export default Root;

Dhe tani le të bëjmë ndryshimet në pjesën e kodit të skedarit main.jsx, pasi si vlerë të element ne tani do të kalojmë komponentin Root, dhe përmbajtja e tij tani ndodhet në skedarin e veçantë root.jsx:

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

Të mos harrojmë rreshtin e importit me komponentin tonë në main.jsx:

import Root from './routes/root';

Hapni aplikacionin e krijuar nga ju në detyrat e mësimeve të kaluara. Krijoni për rrugën kryesore një komponent të veçantë React Root në një skedar të veçantë root.jsx, siç përshkruhet në këtë mësim. Bëni ndryshimet në main.jsx tuaj.