Route không có đường dẫn trong React Router

Trong bài học này, chúng ta sẽ xem xét thêm một thuộc tính hữu ích nữa của route không có đường dẫn.

Bạn biết rằng với mỗi đối tượng route, bạn có thể thêm thuộc tính errorElement và đặt giá trị là phần tử mà bạn muốn hiển thị khi xảy ra lỗi.

Nhưng nếu errorElement của chúng ta giống nhau cho tất cả các route thì sao? Tất nhiên có thể, thêm cùng một thứ cho từng cái, hoặc có thể sử dụng một route không có đường dẫn, bọc các route con mà chúng ta quan tâm bên trong nó. Khi đó, trong trường hợp xảy ra lỗi ở một trong số chúng, route không có đường dẫn của chúng ta sẽ bắt chúng và hiển thị errorElement của nó.

Hãy vào file main.jsx và bọc tất cả các route con của chúng ta vào một route không có đường dẫn, biến chúng thành các route con của nó (đến lượt mình, route này sẽ trở thành route con của route gốc), đừng quên cũng thêm cho nó thuộc tính 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,
					},
				],
			},
		],
	},
]);

Làm thế nào để kiểm tra hoạt động của mã này bây giờ? Có thể thêm một dòng ném ra lỗi (đừng quên xóa nó sau khi đã kiểm tra). Ví dụ, hãy thêm nó vào dòng đầu tiên trong hàm action cho route xóa sản phẩm, khi đó khi cố gắng xóa sản phẩm, chúng ta sẽ thấy lỗi:

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

Bây giờ hãy thử xóa một sản phẩm nào đó.

Hãy lấy ứng dụng được tạo bởi bạn trong các bài tập của các bài học trước. Sử dụng tài liệu của bài học, hãy bọc các route con của bạn vào một route không có đường dẫn với thuộc tính errorElement và kiểm tra rằng nó hoạt động.