React Router'da Rota Silme

Veri deposundan veri silmek için fonksiyonu yazdık. Şimdi ürün sayfasının düzenine ürünü silmek için bir buton ekleyeceğimiz kodu ekleyelim. Onu düzenleme butonundan hemen sonra ekleyelim. Her iki formu ve butonları #control div'i içine alalım. Sonra action içine 'delete' değerini yazalım. Ayrıca kullanıcının ürünü silmek istediğini tekrar onaylaması için bir iletişim kutusu ekleyeceğiz:

<div id="control">
	<Form action="edit">
		<button type="submit">edit</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Bu ürünü silmek istiyor musunuz?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">delete</button>
	</Form>
</div>

CSS dosyamıza biraz stil de ekleyelim:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Şimdi ürünü silmek için yeni bir rota oluşturacağız. Bunun için routes klasörünü açın ve içinde delete.jsx dosyasını oluşturun. Hemen redirect ve silme fonksiyonu deleteProduct import'unu ekleyelim:

import { redirect } from 'react-router-dom';
import { deleteProduct } from '../forStorage';

Ve sonra, elbette, deleteProduct fonksiyonunu id ile çağıracak ve silme işleminden sonra bizi ana sayfaya yönlendirecek olan action fonksiyonumuzu yazıyoruz:

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

Şimdi sadece main.jsx dosyasını açmamız gerekiyor. action fonksiyonumuzu içe aktaralım:

import { action as deleteAction } from './routes/delete';

Ve onu silme rotasının action metodu için değer olarak ayarlayalım. Rota nesnesinin kendisini children dizisinin sonuna ekleyeceğiz:

{
	path: 'products/:productId/delete',
	action: deleteAction,
},

Artık herhangi bir ürüne tıklayıp silme butonunu kullanarak silebiliriz. Geliştirici panelindeki localforage'a bakarak bunu doğrulayabilirsiniz.

Önceki derslerdeki görevlerde oluşturduğunuz uygulamayı alın. Dersteki materyalleri kullanarak, öğrenci silmek için bir buton ekleyin, silme işlemi için yeni bir rota yapın, onu alt rotalara ekleyin. Her şeyin çalıştığından emin olun.