Индексный маршрут в React Router
На этом уроке мы узнаем, что такое индексные маршруты.
Для начала давайте обратим внимание
на одну вещь. Когда мы находимся на
главной странице, то справа мы
видим просто просто пустой экран.
Все потому что ни один из дочерних
маршрутов не подходит по адресу '/',
а что выводить в этом случае мы не
сказали. В таком случае, чтобы не
отображать пустую страницу можно
применить индексный маршрут - такой
дочерний маршрут, который не имеет
пути, и его элемент отображается в
родительском Outlet тогда,
когда не подходит ни один
из набора дочерних. С помощью таких
маршрутов можно размещать какую-либо
информацию, или статистику, или еще
что-нибудь подобное. Как и в случае
с обычными их можно использовать для
загрузки данных.
Давайте создадим файл index.jsx
в папке routes, а в нем компонент
Index:
export default function Index() {
return (
<div>
<p>Hi, React Router!</p>
<p>This is an application for my products :)</p>
</div>
);
}
Теперь перейдем в main.jsx и
импортируем туда наш компонент
Index:
import Index from './routes/index';
А первым элементом в массив children
добавим объект, где свойство index
установлено в true, а в качестве элемента
для отображения будет наш компонент
Index:
{ index: true, element: <Index /> },
Возьмите приложение, созданное вами в заданиях к прошлому уроку. Пользуясь материалами урока, добавьте индексный маршрут с адресом главной страницы с каким-нибудь текстом.