Ustvarjanje korenskega poti v React Router

Glavna pot, ki vodi na domačo stran, se pogosto imenuje korenska pot (root route), saj se bodo druge poti upodabljale znotraj nje. Zelo priročno je, da jo predstavimo kot ločeno komponento. Zato vzemimo znova našo aplikacijo in v mapi src ustvarimo še eno in jo poimenujmo routes. Sedaj v tej mapi ustvarimo datoteko root.jsx za ločeno React komponento Root. Koda v datoteki bo videti takole:

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

export default Root;

In sedaj predelajmo delček kode datoteke main.jsx, saj bomo kot vrednost element zdaj podali komponento Root, njena vsebina pa je zdaj v ločeni datoteki root.jsx:

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

Ne pozabimo vrstice za uvoz z našo komponento v main.jsx:

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