Креирање на коренски пат во React Router

Често главниот пат, кој води до главната страница, се нарекува коренски (root route), бидејќи другите патишта ќе се рендерираат внатре во него. Многу е погодно да се претстави како посебна компонента. Затоа, да го земеме повторно нашето приложение и во папката src да создадеме уште една и да ја именуваме routes. Сега во оваа папка да креираме датотека root.jsx за посебна React компонента Root. Кодот во датотеката ќе изгледа вака:

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

export default Root;

А сега да направиме промени во делот од кодот на датотеката main.jsx, бидејќи како вредност за element сега ќе го пренесуваме компонентот Root, а неговата содржина сега се наоѓа во посебна датотека root.jsx:

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

Да не заборавиме линијата за импорт со нашиот компонент во main.jsx:

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