Menambahkan Rute Lain di React Router

Kita memiliki rute akar yang mengarah ke halaman utama, di mana kita memiliki tautan untuk produk. Sekarang mari tambahkan satu rute lagi sehingga saat mengklik salah satu tautan, kita akan melihat halaman untuk produknya, bukan layar kesalahan.

Pertama-tama, mari buka aplikasi kita yang dibuat pada pelajaran sebelumnya dan buat file product.jsx di folder routes. Mari buat komponen Product di dalamnya:

function Product() {}

export default Product;

Sekarang buat objek product di dalam Product, dengan properti name, cost dan amount, untuk sementara ini adalah beberapa nilai yang tetap:

function Product() {
	const product = {
		name: 'Product',
		cost: 400,
		amount: 5,
	};
}

export default Product;

Dan di halaman produk kita akan menampilkan, sesuai, namanya, biaya, dan jumlahnya:

return (
	<div>
		<h2>Halaman Produk</h2>
		<p>Nama: {product.name}</p>
		<p>Biaya: {product.cost}</p>
		<p>Jumlah: {product.amount}</p>
	</div>
);

Pastikan untuk menambahkan impor komponen Product ke file main.jsx:

import Product from './routes/product';

Dan akhirnya, tambahkan satu rute lagi ke aplikasi kita, lakukan ini segera setelah rute akar. Sebagai path atur 'products/:productId', dan sebagai elemen untuk ditampilkan adalah komponen Product:

{
	path: '/',
	element: <Root />,
	errorElement: <ErrorPage404 />,
},
{
	path: 'products/:productId',
	element: <Product />,
},

Dan sekarang jalankan aplikasinya, klik tautan dan kita akan sampai di halaman produk (untuk saat ini sama untuk semua tautan), bukan halaman kesalahan.

Ambil aplikasi yang Anda buat dalam tugas untuk pelajaran sebelumnya. Gunakan materi pelajaran, buat file serupa student.jsx, biarkan di halaman mahasiswa ditampilkan namanya, nama belakang, tahun masuk dan spesialisasi. Tambahkan rute baru untuk halaman mahasiswa di file main.jsx, atur nilai path ke 'students/:studentId'. Pastikan bahwa dengan mengklik tautan Anda sekarang sampai di halaman mahasiswa.