Vytvorenie koreňovej trasy v React Router

Hlavná trasa, ktorá vedie na domovskú stránku, sa často nazýva koreňová (root route), pretože ostatné trasy sa budú vykresľovať vnútri nej. Je veľmi výhodné reprezentovať ju ako samostatný komponent. Preto si opäť zoberme našu aplikáciu a v priečinku src vytvorme ešte jeden a pomenujme ho routes. Teraz v tomto priečinku vytvorme súbor root.jsx pre samostatný React komponent Root. Kód v súbore bude vyzerať takto:

function Root() {
	return <div>Hello Router!</div>;
}

export default Root;

A teraz poďme vykonať zmeny v kúsku kódu súboru main.jsx, pretože ako hodnotu element teraz budeme odovzdávať komponent Root, a jeho obsah sa teraz nachádza v samostatnom súbore root.jsx:

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

Nezabudnime na riadok importu s našim komponentom v main.jsx:

import Root from './routes/root';

Otvorte aplikáciu, ktorú ste vytvorili v úlohách k predchádzajúcim lekciám. Vytvorte pre koreňovú trasu samostatný React komponent Root v samostatnom súbore root.jsx, ako je popísané v tejto lekcii. Vykonajte zmeny vo vašom main.jsx.