Oprettelse af en rodrute i React Router

Hovedruten, der fører til forsiden, kaldes ofte for rodruten (root route), fordi andre ruter vil blive gengivet inden i den. Det er meget praktisk at forestille sig den som en separat komponent. Så lad os tage vores applikation igen og i mappen src oprette endnu en og kalde den routes. Nu i denne mappe opretter vi filen root.jsx for en separat React-komponent Root. Koden i filen vil se sådan ud:

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

export default Root;

Og lad os nu foretage ændringerne i stykket kode i filen main.jsx, fordi som værdi for element vil vi nu sende komponenten Root, og dens indhold befinder sig nu i en separat fil root.jsx:

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

Lad os ikke glemme import-sætningen med vores komponent i main.jsx:

import Root from './routes/root';

Åbn den applikation, du oprettede i opgaverne til de foregående lektioner. Opret for rodruten en separat React komponent Root i en separat fil root.jsx, som beskrevet i denne lektion. Foretag ændringerne i din main.jsx.