Създаване на основен маршрут в 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';