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:

function 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:

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

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

import Root from './routes/root';

Otevřete aplikaci, kterou jste vytvořili v úkolech k minulým lekcím. Vytvořte pro kořenovou trasu samostatnou React komponentu Root v samostatném souboru root.jsx, jak je popsáno v této lekci. Proveďte změny ve vašem main.jsx.