Halaman Edit Produk di Browser dengan Redux

Pada pertemuan sebelumnya, kita telah membuat formulir untuk mengedit produk. Mari kita tambahkan rute untuknya.

Buka aplikasi produk kita, dan di dalamnya file App.jsx dan tambahkan satu lagi objek rute anak ke dalam array untuk properti children (jangan lupa untuk mengimpor EditProductForm):

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

Juga untuk berpindah ke formulir edit kita perlu membuat tautan. Untuk ini, bukalah ProductPage.jsx dan tempatkan tautan ini di markup yang dikembalikan setelah paragraf terakhir dengan jumlah produk dan sebelum div penutup:

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

Juga impor Link dari library router:

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

Jalankan aplikasi kita dan klik tombol lihat produk mana saja. Cobalah untuk mengeditnya dan kembali ke daftar produk, dengan mengklik tautan 'Products' di menu sebelah kiri. Juga di Redux DevTools Anda dapat melihat action baru productUpdated dan melihat perubahan objek produk di store.

Buka aplikasi Anda yang berisi data mahasiswa. Di file App.jsx tambahkan satu lagi rute anak untuk mengedit data mahasiswa.

Tambahkan elemen Link di markup pada halaman mahasiswa untuk berpindah ke halaman edit datanya.

Jalankan aplikasi Anda, cobalah untuk mengedit data salah satu mahasiswa. Perhatikan bilah alamat browser ketika Anda berada pada halaman edit. Lihatlah perubahan di Redux DevTools browser.