Creazione di una Route Radice in React Router

Spesso la route principale, che conduce alla pagina home, viene chiamata radice (root route), poiché altre route verranno renderizzate al suo interno. È molto comodo rappresentarla come un componente separato. Quindi riprendiamo la nostra applicazione e nella cartella src creiamone un'altra e chiamiamola routes. Ora in questa cartella creiamo il file root.jsx per un componente React separato Root. Il codice nel file sarà così:

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

export default Root;

E ora modifichiamo un pezzetto di codice del file main.jsx, poiché come valore di element ora passeremo il componente Root, e il suo contenuto ora si trova in un file separato root.jsx:

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

Non dimentichiamo la riga di import con il nostro componente in main.jsx:

import Root from './routes/root';

Aprite l'applicazione creata da voi negli esercizi delle lezioni precedenti. Create per la route radice un componente React separato Root in un file separato root.jsx, come descritto in questa lezione. Apportate le modifiche al vostro main.jsx.