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:

routes/product.jsxfunction 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:

routes/product.jsxfunction Product() {
  const product = {
    name: 'Product',
    cost: 400,
    amount: 5,
  };
}

export default Product;

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

routes/product.jsxreturn (
  <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:

main.jsximport 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:

main.jsx{
  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.