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:

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

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

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

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