Mendapatkan Data Pemuatan melalui Parameter URL dalam React Router

Dalam pelajaran lepas, kami menulis fungsi untuk mendapatkan data halaman produk, mari import getProduct dalam fail product.jsx:

routes/product.jsximport { getProduct } from '../forStorage';

Tulis fungsi pemuat loader sejurus selepas import dan sebelum fungsi Product. Sampaikan parameter URL kepadanya:

routes/product.jsxexport async function loader({ params }) {
  const product = await getProduct(params.productId);
  return { product };
}

Juga import hook useLoaderData untuk menggunakan data yang diperoleh oleh pemuat:

routes/product.jsximport { useLoaderData } from 'react-router-dom';

Gunakan useLoaderData, dengan sewajarnya menggantikan baris dengan penciptaan objek product pada permulaan fungsi Product dengan yang berikut:

routes/product.jsxconst { product } = useLoaderData();

Dan, sudah tentu, ubah sedikit markah kami, kerana kami membuang objek lama product. Gantikan kandungan perenggan:

routes/product.jsx<p>Name: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Amount: {product.amount}</p>

Dengan yang berikut:

routes/product.jsx<p>Nama: {product.name ? product.name : <i>unnamed</i>}</p>
<p>Kos: {product.cost ? product.cost : <i>unknown</i>}</p>
<p>Kuantiti: {product.amount ? product.amount : <i>unknown</i>}</p>

Kami tinggal membuka main.jsx dan tambah import loader di sana, namakannya productLoader:

main.jsximport Product, {
  loader as productLoader,
} from './routes/product';

Dan nyatakannya sebagai pemuat untuk objek laluan halaman produk, menambahkannya ke dalam children selepas sifat element:

main.jsxchildren: [
  {
    path: 'products/:productId',
    element: <Product />,
    loader: productLoader,
  },
],

Selesai, dengan memuatkan data untuk halaman produk kami telah selesai! Walaubagaimanapun, tiada apa untuk dimuatkan buat masa ini. Jalankan aplikasi, tambah beberapa produk dan klik pada mereka dalam senarai untuk memastikan semuanya berfungsi.