Creazione di una Route Radice in React Router

Spesso la route principale, che conduce alla pagina home, viene chiamata radice (root route), poiché altre route verranno renderizzate al suo interno. È molto comodo rappresentarla come un componente separato. Quindi riprendiamo la nostra applicazione e nella cartella src creiamone un'altra e chiamiamola routes. Ora in questa cartella creiamo il file root.jsx per un componente React separato Root. Il codice nel file sarà così:

routes/root.jsxfunction Root() {
  return <div>Ciao Router!</div>;
}

export default Root;

E ora modifichiamo un pezzetto di codice del file main.jsx, poiché come valore di element ora passeremo il componente Root, e il suo contenuto ora si trova in un file separato root.jsx:

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

Non dimentichiamo la riga di import con il nostro componente in main.jsx:

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