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