Ruta sin path en React Router

En esta lección, consideraremos otra propiedad útil de la ruta sin path.

Sabes que para cada objeto de ruta puedes agregar la propiedad errorElement y como valor establecer el elemento que deseas mostrar cuando ocurra un error.

Pero, ¿qué pasa si nuestro errorElement es el mismo para todas las rutas? Por supuesto, podríamos repetir lo mismo para cada una, o podemos usar una ruta sin path, envolver las rutas hijas que nos interesan dentro de ella. Entonces, en caso de que ocurra un error en una de ellas, nuestra ruta sin path las capturará y mostrará su errorElement.

Vayamos al archivo main.jsx y envolvamos todas nuestras rutas hijas en una ruta sin path, haciéndolas hijas de ella (a su vez, esta ruta se convertirá en hija de la ruta raíz), no olvidemos agregarle también la propiedad 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,
					},
				],
			},
		],
	},
]);

¿Cómo verificar ahora el funcionamiento de este código? Podemos agregar una línea que lance un error (no olvides eliminarla después, cuando lo hayas verificado). Por ejemplo, agreguémosla como primera línea en la función action para la ruta de eliminación del producto, entonces al intentar eliminar un producto veremos el error:

export async function action({ params }) {
	throw new Error('error');
	await deleteProduct(params.productId);
	return redirect('/');
}

Ahora intenta eliminar algún producto.

Toma la aplicación que creaste en las tareas de lecciones anteriores. Usando los materiales de la lección, envuelve tus rutas hijas en una ruta sin path con la propiedad errorElement y verifica que funcione.