Skapa en rotroute i React Router

Ofta kallas huvudrouten, som leder till hemsidan, för rotroute (root route), eftersom andra rutter kommer att renderas inuti den. Det är mycket bekvämt att föreställa sig den som en separat komponent. Låt oss därför ta vår applikation igen och i mappen src skapa ytterligare en och kalla den routes. Nu skapar vi i denna mapp filen root.jsx för en separat React-komponent Root. Koden i filen kommer att se ut så här:

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

export default Root;

Och låt oss nu göra ändringar i biten av koden i filen main.jsx, eftersom som värde för element kommer vi nu att skicka komponenten Root, och dess innehåll finns nu i en separat fil root.jsx:

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

Låt oss inte glömma importraden med vår komponent i main.jsx:

import Root from './routes/root';

Öppna applikationen du skapade i uppgifterna till tidigare lektioner. Skapa för rotroutern en separat React- komponent Root i en separat fil root.jsx, som beskrivs i denna lektion. Gör ändringar i din main.jsx.