Halaman Sunting Produk dalam Pelayar di Redux

Dalam pelajaran lepas, kami telah membuat borang untuk menyunting produk. Mari kita tambah laluan untuknya.

Buka aplikasi produk kami, dan dalam fail App.jsx tambah satu lagi objek laluan anak dalam tatasusunan untuk sifat children (jangan lupa untuk mengimport EditProductForm):

{
	path: '/editProduct/:productId',
	element: <EditProductForm />,
},

Juga, untuk pergi ke borang suntingan kita perlu membuat pautan. Untuk ini buka ProductPage.jsx dan letakkan pautan ini dalam balutan yang dipulangkan selepas perenggan terakhir dengan kuantiti produk dan sebelum div penutup:

<Link to={`/editProduct/${product.id}`} className="link-btn">
	edit
</Link>

Juga import Link dari pustaka penghala:

import { Link } from 'react-router-dom'

Jalankan aplikasi kami dan klik pada butang lihat mana-mana produk. Cuba menyuntingnya dan kembali kepada senarai produk, dengan mengklik pada pautan 'Products' dalam menu di sebelah kiri. Juga dalam Redux DevTools anda boleh melihat tindakan baru productUpdated dan melihat perubahan objek produk dalam store.

Buka aplikasi pelajar anda. Dalam fail App.jsx tambah satu lagi laluan anak untuk menyunting data pelajar.

Tambah elemen Link dalam balutan pada halaman pelajar untuk pergi ke halaman menyunting datanya.

Jalankan aplikasi anda, cuba menyunting data mana-mana pelajar. Perhatikan bar alamat pelayar apabila anda berada pada halaman suntingan. Lihat perubahan dalam Redux DevTools pelayar.