Halaman Produk di Browser dalam Redux

Pada pertemuan sebelumnya, kita membuat halaman terpisah untuk produk. Sekarang kita perlu melakukan agar saat tombol ditekan, halaman kita muncul di browser.

Pertama-tama, mari tambahkan alamat untuknya, di mana ia akan ditampilkan. Buka file App.jsx, di mana kita mendefinisikan rute, dan tambahkan di children satu rute anak lagi (jangan lupa untuk mengimpor ProductPage.jsx). Tentukan path dan komponen yang akan ditampilkan:

{
	path: '/products/:productId',
	element: <ProductPage />,
},

Sekarang mari buka ProductsList.jsx di folder products dan ubah sedikit kode untuk dispProducts. Sekarang kita memiliki halaman terpisah dengan informasi lengkap tentang setiap produk. Artinya dalam daftar produk kita hanya akan menampilkan nama produk dan teks deskripsi yang dipersingkat. Kami juga akan menambahkan tautan dalam bentuk elemen navigasi Link dari library router, yang saat ditekan akan mengarah ke halaman produk. Tambahkan juga kelas div product-excerpt untuk memisahkan produk. Sekarang kode kita untuk dispProducts akan menjadi seperti ini:

const dispProducts = products.map((product) => (
	<div key={product.id} className="product-excerpt">
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<Link to={`/products/${product.id}`} className="link-btn">
			view
		</Link>
	</div>
))

Impor Link:

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

Dan tambahkan gaya untuk kelas link-btn dan product-excerpt di index.css:

.product-excerpt {
	margin-top: 30px;
	border: 1px solid gray;
	border-radius: 5px;
	padding: 10px;
}

.link-btn {
	border: 1.5px solid gray;
	border-radius: 10px;
	background-color: coral;
	color: black;
	padding: 1px 12px 1px 12px;
}

Terakhir, mari kita buat juga tautan di menu sebelah kiri yang menuju ke halaman daftar produk agar kita bisa mengaksesnya dari tempat lain. Untuk melakukan ini, buka root.jsx kita dan ganti baris kode ini:

<a>Products</a>

Dengan yang berikut:

<NavLink to="/products" end>
	Products
</NavLink>

Juga jangan lupa untuk mengimpor NavLink dari library untuk React router:

import { Outlet, NavLink } from 'react-router-dom'

Jalankan aplikasi kita. Sekarang kita bisa melihat halaman informasi tentang produk apa pun dengan menekan tombol lihat. Coba tambahkan produk baru dan lihat informasinya di halaman terpisah dengan menekan tombol lihat. Juga sekarang, untuk kembali ke daftar produk cukup klik 'Products' di menu sebelah kiri. Saat berada di halaman yang berbeda, perhatikan bagaimana URL di address bar browser berubah.

Buka aplikasi Anda dengan data siswa. Di file App.jsx buat satu lagi rute anak untuk halaman siswa.

Di file StudentsList.jsx lakukan perubahan pada kode untuk dispStudents, seperti yang ditunjukkan dalam pelajaran.

Lakukan agar tautan 'Students' di menu kiri mengarah ke halaman daftar siswa. Periksa apakah semuanya berfungsi.

Perhatikan bagaimana nilai di address bar browser akan berubah, tergantung pada halaman mana Anda saat ini berada.