Laluan Tanpa Path dalam React Router

Dalam pelajaran ini, kita akan melihat satu lagi ciri berguna laluan tanpa path.

Anda tahu bahawa untuk setiap objek laluan, anda boleh menambah sifat errorElement dan sebagai nilai tetapkan elemen yang anda mahu paparkan apabila berlakunya ralat.

Tetapi bagaimana jika errorElement kita adalah sama untuk semua laluan? Boleh, sudah tentu, meletakkan perkara yang sama untuk setiap satu, atau anda boleh menggunakan laluan tanpa path, membungkus laluan anak yang kita minati di dalamnya. Maka, sekiranya berlakunya ralat pada salah satu daripadanya, laluan kita tanpa path akan menangkapnya dan memaparkan errorElement-nya.

Mari kita pergi ke fail main.jsx dan bungkus kesemua laluan anak kita dalam laluan tanpa path, menjadikannya anak kepadanya (sebaliknya laluan ini akan menjadi anak kepada laluan akar), jangan lupa juga untuk menambah sifat errorElement kepadanya:

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 untuk menguji kerja kod ini sekarang? Anda boleh menambah barisan dengan membuang ralat (jangan lupa untuk membuangnya kemudian, selepas anda menguji). Mari, sebagai contoh, tambahkannya sebagai barisan pertama dalam fungsi action untuk laluan memadam produk, maka apabila cuba memadam produk kita akan melihat ralat:

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

Sekarang cuba padam mana-mana produk.

Ambil aplikasi yang dicipta oleh anda dalam tugasan untuk pelajaran lepas. Dengan menggunakan bahan pelajaran, bungkus laluan anak anda dalam laluan tanpa path dengan sifat errorElement dan uji, bahawa ia berfungsi.