Маршрут без пути в React Router
На этом уроке мы рассмотрим еще одно полезное свойство маршрута без пути.
Вы знаете, что для каждого объекта
маршрута вы можете добавить свойство
errorElement и в качестве значения
установить тот элемент, который
хотите отображать при возникновении
ошибки.
Но что если у нас errorElement
будет одинаковым для всех маршрутов? Можно,
конечно наляпать одно и тоже для каждого,
а можно воспользоваться маршрутом без пути,
обернуть в него интересующие нас дочерние
маршруты. Тогда в случае возникновения
ошибки на одном из них, наш маршрут
без пути будет их отлавливать и
отображать свой errorElement.
Зайдем в main.jsx файл и обернем
в маршрут без пути все наши дочерние маршруты,
сделав их дочерними для него (в свою очередь
этот маршрут станет дочерним для
корневого), не забудем добавить ему также
свойство errorElement:
const router = createBrowserRouter([
{
path: '/',
element: <Root />,
errorElement: <ErrorPage404 />,
loader: rootLoader,
action: rootAction,
children: [
{
errorElement: <ErrorPage404 />,
children: [
{ index: true, element: <Index /> },
{
path: 'products/:productId',
element: <Product />,
loader: productLoader,
},
{
path: 'products/:productId/edit',
element: <EditProduct />,
loader: editProductLoader,
action: editAction,
},
{
path: 'products/:productId/delete',
action: deleteAction,
},
],
},
],
},
]);
Как проверить теперь работу этого кода?
Можно добавить строчку с выбрасыванием
ошибки (не забудьте потом ее убрать,
когда проверим ;) ). Давайте, к примеру,
добавим ее первой строчкой в функцию
action для маршрута удаления
продукта, тогда при попытке удалить
продукт мы увидим ошибку:
export async function action({ params }) {
throw new Error('error');
await deleteProduct(params.productId);
return redirect('/');
}
Теперь попробуйте удалить какой-нибудь продукт.
Возьмите приложение, созданное вами в заданиях к прошлым урокам. Пользуясь материалами урока, оберните ваши дочерние маршруты в маршрут без пути со свойством errorElement и проверьте, что это работает.