การรับข้อมูลจาก Loader ผ่าน URL Parameters ใน React Router

ในบทเรียนที่แล้ว เราเขียนฟังก์ชันสำหรับ รับข้อมูลหน้าผลิตภัณฑ์ มาลอง import getProduct ในไฟล์ product.jsx กัน:

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

มาเขียนฟังก์ชัน loader loader ทันทีหลัง import และก่อนฟังก์ชัน Product กัน โดยส่ง URL parameters เข้าไป:

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

นอกจากนี้ ให้นำเข้า hook useLoaderData เพื่อ ใช้ข้อมูลที่ได้รับจาก loader:

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

ลองใช้ useLoaderData โดย เปลี่ยนบรรทัดที่สร้างอ็อบเจ็กต์ product ตอนเริ่มต้นของฟังก์ชัน Product เป็นดังนี้:

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

และแน่นอน ต้องปรับแต่ง markup ของเรา เล็กน้อย เพราะเราได้เอาอ็อบเจ็กต์ product แบบเก่าออกแล้ว เปลี่ยนเนื้อหาใน paragraph:

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

เป็นดังนี้:

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

เหลือแค่เปิดไฟล์ main.jsx แล้วเพิ่ม import loader เข้าไป ตั้งชื่อว่า productLoader:

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

และระบุมันเป็น loader สำหรับอ็อบเจ็กต์ route ของหน้าผลิตภัณฑ์ โดยเพิ่มลงใน children หลังจาก property element:

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

เท่านี้ ก็เรียบร้อยกับการโหลดข้อมูลสำหรับหน้า ผลิตภัณฑ์! แต่ว่า ตอนนี้ยังไม่มีอะไรให้โหลดเลย ลองรัน แอปพลิเคชัน เพิ่มผลิตภัณฑ์เข้าไป แล้วลองคลิกที่รายการผลิตภัณฑ์ดู เพื่อ ให้แน่ใจว่าทุกอย่างทำงานได้ปกติ