Креирање на коренски пат во 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 датотека.