React Router-da Ýolsyz Marshrut

Bu sapakda biz ýolsyz marshrutyň ýene bir peýdaly aýratynlygyny gözden geçireris.

Her bir marshrut objekti üçin errorElement guruşyny goşup, bahasy hökmünde ýalňyşlyk ýüze çykanda görkezmek isleyän elementizi belläp bileriňizi bilýäňiz.

Emma eger bizde ähli marshrutlar üçin errorElement deň bolsa? Elbetde, hersine şol bir zady ýazypsyryp bolýar, ýa-da ýolsyz marshrutdan peýdalanyp, biziň gyzyklanýan çagalarymyzy onuň içine sarp edip bolýar. Şonda olaryň birinde ýalňyşlyk ýüze çykanda, bizim ýolsyz marshrutymyz olary tutar we öz errorElement-ni görkezer.

main.jsx faýlyna girip, ähli çaga marshrutlarymyzy ýolsyz marshrut bilen gapdalaýs (öz gezeginde bu marshrut kök çaga bolar), ýatdan çykarmazlyk errorElement guruşyny hem goşaly:

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

Indi bu kodyň işini nädip barlamaly? Ýalňyşlyk atýan setir goşup bolýar (bardan soň barlap görüňiz, soňra aýyryň). Meselem, önümi pozmak üçin bolan marshrutyň action funksiýasyna ony birinji setir hökmünde goşaly, şonda önümi pozmak synanyşygymyzda biz ýalňyşlygy göreris:

export async function action({ params }) {
	throw new Error('ýalňyşlyk');
	await deleteProduct(params.productId);
	return redirect('/');
}

Indi haýsydyr bir önümi pozmagy synanyşyň.

Öňki sapakdaky tabşyryklarda döreden programmaňyzy alyň. Sapak materiallaryny ulanyp, çaga marshrutlaryňyzy errorElement guruşly ýolsyz marshrut bilen gapdalaň we işleýändigini barlaň.