Saknes maršruta izveide React Router

Bieži vien galveno maršrutu, kas ved uz mājas lapu, sauc par saknes maršrutu (root route), jo citi maršruti tiks renderēti tā iekšienē. Ir ļoti ērti to attēlot kā atsevišķu komponentu. Tāpēc vēlreiz paņemsim mūsu lietotni un mapē src izveidosim vēl vienu un nosauksim to par routes. Tagad šajā mapē izveidosim failu root.jsx atsevišķam React komponentam Root. Kods failā izskatīsies šādi:

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

export default Root;

Un tagad veiksim izmaiņas faila main.jsx koda daļā, jo kā element vērtību mēs tagad padodam komponentu Root, un tā saturs tagad atrodas atsevišķā failā root.jsx:

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

Neaizmirsīsim importa rindu ar mūsu komponentu main.jsx:

import Root from './routes/root';

Atveriet lietotni, ko izveidojāt iepriekšējo nodarbību uzdevumos. Izveidojiet saknes maršrutam atsevišķu React komponentu Root atsevišķā failā root.jsx, kā aprakstīts šajā nodarbībā. Veiciet izmaiņas savā main.jsx.