Vytvoření kořenové trasy v React Router

Hlavní trasa, která vede na domovskou stránku, je často nazývána kořenová (root route), protože ostatní trasy se budou vykreslovat uvnitř ní. Je velmi výhodné reprezentovat ji jako samostatnou komponentu. Pojďme tedy znovu vzít naši aplikaci a ve složce src vytvořit ještě jednu a pojmenujeme ji routes. Nyní v této složce vytvoříme soubor root.jsx pro samostatnou React komponentu Root. Kód v souboru bude vypadat takto:

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

export default Root;

A nyní pojďme provést změny v kousku kódu souboru main.jsx, protože jako hodnotu element nyní budeme předávat komponentu Root, a její obsah se nyní nachází v samostatném souboru root.jsx:

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

Nezapomeneme na řádek importu s naší komponentou v main.jsx:

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