Opprettelse av rot-rute i React Router

Hovedruten som leder til hovedsiden kalles ofte for rot-ruten (root route), fordi andre ruter vil bli rendret inni den. Det er veldig praktisk å se den som en separat komponent. Så la oss ta applikasjonen vår igjen og i mappen src opprette en til og kalle den routes. Nå i denne mappen oppretter vi filen root.jsx for en separat React-komponent Root. Koden i filen vil se slik ut:

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

export default Root;

Og la oss nå gjøre endringer i kodesnutten i filen main.jsx, fordi som verdi for element vil vi nå sende komponenten Root, og innholdet ligger nå i en separat fil root.jsx:

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

La oss ikke glemme import-setningen med vår komponent i main.jsx:

import Root from './routes/root';

Åpne applikasjonen du opprettet i oppgavene til de foregående leksjonene. Opprett for rot-ruten en separat React komponent Root i en separat fil root.jsx, som beskrevet i denne leksjonen. Gjør endringer i din main.jsx.