Kuunda Njia Mkuu katika React Router

Mara nyingi njia kuu, inayoongoza kwenye ukurasa kuu, huitwa njia mkuu (root route), kwa sababu njia zingine zitarekodiwa ndani yake. Ni rahisi sana kuifanya iwe sehemu tofauti. Kwa hivyo hebu tuchukue tena programu yetu na kwenye folda src tuunde nyingine na tuiite routes. Sasa kwenye folda hii tuunde faili root.jsx kwa sehemu tofauti ya React Root. Msimbo katika faili utaonekana kama hii:

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

export default Root;

Sasa hebu tufanye mabadiliko kwenye kipande cha msimbo wa faili main.jsx, kwa sababu kama thamani ya element sisi sasa tutapita sehemu Root, na yaliyomo yake sasa yamo kwenye faili tofauti root.jsx:

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

Tusisahau mstari wa kuagiza na sehemu yetu katika main.jsx:

import Root from './routes/root';

Fungua programu uliyoiumba kwenye kazi za masomo yaliyopita. Unda kwa njia mkuu sehemu tofauti ya React Root kwenye faili tofauti root.jsx, kama ilivyoelezwa kwenye hili somo. Fanya mabadiliko kwenye yako main.jsx.