Rute Tanpa Path di React Router

Pada pelajaran ini, kita akan membahas satu lagi sifat berguna dari rute tanpa path.

Anda tahu bahwa untuk setiap objek rute, Anda dapat menambahkan properti errorElement dan sebagai nilainya atur elemen yang ingin Anda tampilkan saat terjadi kesalahan.

Tapi bagaimana jika errorElement kita akan sama untuk semua rute? Bisa saja, tentu menambahkan hal yang sama untuk setiap rute, atau bisa menggunakan rute tanpa path, membungkus rute-rute anak yang kita minati di dalamnya. Maka jika terjadi kesalahan pada salah satunya, rute tanpa path kita akan menangkapnya dan menampilkan errorElement miliknya.

Mari masuk ke file main.jsx dan bungkus semua rute anak kita dalam rute tanpa path, menjadikannya anak untuknya (dan rute ini akan menjadi anak untuk rute root), jangan lupa juga tambahkan properti errorElement untuknya:

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,
					},
				],
			},
		],
	},
]);

Bagaimana cara memeriksa kerja kode ini sekarang? Bisa dengan menambahkan baris yang melemparkan kesalahan (jangan lupa untuk menghapusnya nanti, setelah Anda periksa). Mari, contohnya, tambahkan di baris pertama fungsi action untuk rute penghapusan produk, maka saat mencoba menghapus produk kita akan melihat kesalahan:

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

Sekarang coba hapus suatu produk.

Ambil aplikasi yang Anda buat dalam tugas untuk pelajaran sebelumnya. Dengan menggunakan materi pelajaran, bungkus rute-rute anak Anda dalam rute tanpa path dengan properti errorElement dan periksa bahwa ini bekerja.