Njia bila Path katika React Router

Katika somo hili tutachunguza tabia nyingine muhimu ya njia bila path.

Unajua kuwa kwa kila kitu cha njia unaweza kuongeza sifa errorElement na kama thamani kuweka kipengele ambacho unataka kuonyesha wakati hitilafu inatokea.

Lakini je, ikiwa errorElement itakuwa sawa kwa njia zote? Unaweza, hakika kuweka kile kile kwa kila kitu, au unaweza kutumia njia bila path, kuifunga ndani yake njia zetu za watoto zinazotuvutia. Kisha wakati hitilafu itakapotokea kwa moja wapo yao, njia yetu bila path itawakamata na kuonyesha errorElement yake.

Tuingie kwenye faili main.jsx na tufunge katika njia bila path njia zote za watoto, tukizifanya kuwa za watoto kwake (kwa upande wake hii njia itakuwa mtoto wa mzizi), tusisahau kuongeza pia sifa 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,
					},
				],
			},
		],
	},
]);

Vipi sasa kuangalia utendakazi wa msimbo huu? Unaweza kuongeza mstari wa kutupa hitilafu (usisahau kuuondoa baadaye, utakapoiangalia). Wacha, kwa mfano, tuongeze kwenye mstari wa kwanza katika kitendo action kwa njia ya kufuta bidhaa, basi wakati wa kujaribu kufuta bidhaa tutaona hitilafu:

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

Sasa jaribu kufuta bidhaa yoyote.

Chukua programu iliyoundwa na wewe katika kazi za masomo yaliyopita. Kwa kutumia nyenzo za somo, funga njia zako za watoto katika njia bila path na sifa errorElement na uangalie kuwa hii inafanya kazi.