Menambah Laluan Lain dalam React Router

Kita ada laluan akar yang menuju ke halaman utama, di mana kita ada pautan untuk produk. Sekarang mari tambah satu lagi laluan supaya apabila diklik pada salah satu pautan, halaman untuk produk akan dipaparkan, bukan skrin ralat.

Pertama, mari buka aplikasi kita yang dibuat dalam pelajaran lepas dan buat fail product.jsx dalam folder routes. Mari buat komponen Product di dalamnya:

function Product() {}

export default Product;

Sekarang mari buat dalam Product objek product, dengan sifat name, cost dan amount, buat masa ini ia adalah nilai tetap:

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

export default Product;

Dan pada halaman produk kita akan memaparkan, masing-masing, namanya, kos dan kuantiti:

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

Jangan lupa tambah import komponen Product dalam fail main.jsx:

import Product from './routes/product';

Akhirnya, mari tambah satu lagi laluan dalam aplikasi kita, buat sejurus selepas laluan akar. Untuk laluan tetapkan 'products/:productId', dan untuk elemen paparan ialah komponen Product:

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

Sekarang mulakan aplikasi, klik pada pautan dan kita akan sampai ke halaman produk (buat masa ini ia sama untuk semua pautan), bukan halaman ralat.

Ambil aplikasi yang anda buat dalam tugasan untuk pelajaran lepas. Menggunakan bahan pelajaran, buat fail student.jsx dengan cara yang sama, biarkan pada halaman pelajar dipaparkan namanya, nama keluarga, tahun kemasukan dan pengkhususan. Tambah laluan baru untuk halaman pelajar dalam fail main.jsx, tetapkan nilai path kepada 'students/:studentId'. Pastikan apabila diklik pada pautan anda sampai sekarang ke halaman pelajar.