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:

routes/root.jsxfunction 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:

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

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

main.jsximport Root from './routes/root';