Crearea rutei de bază în React Router

Adesea, ruta principală care duce către pagina de start este numită ruta de bază (root route), deoarece alte rute vor fi randate în interiorul ei. Este foarte convenabil să o reprezentăm ca un component separat. Deci, să luăm din nou aplicația noastră și în folderul src să creăm încă unul și să-l numim routes. Acum, în acest folder, să creem fișierul root.jsx pentru un component React separat Root. Codul din fișier va arăta astfel:

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

export default Root;

Și acum, să aducem modificări în bucățica de cod din fișierul main.jsx, deoarece ca valoare a element acum vom transmite componentul Root, iar conținutul lui se află acum în un fișier separat root.jsx:

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

Să nu uităm linia de import cu componentul nostru în main.jsx:

import Root from './routes/root';

Deschideți aplicația creată de dvs. în sarcinile din lecțiile trecute. Creați pentru ruta de bază un component React separat Root într-un fișier separat root.jsx, așa cum este descris în această lecție. Aduceți modificări în main.jsx-ul dvs.