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