Креирање коренског рута у React Router

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

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

export default Root;

А сада хајде да унесемо промене у делић кода фајла main.jsx, пошто као вредност element ми сада преносимо компоненту Root, а њен садржај се сада налази у засебном фајлу root.jsx:

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

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

import Root from './routes/root';

Отворите апликацију коју сте креирали у задацима за прошле лекције. Направите за коренски рут засебну React компоненту Root у засебном фајлу root.jsx, као што је описано у овој лекцији. Унесите промене у ваш main.jsx.