Създаване на основен маршрут в 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.