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

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

import { getProduct } from '../forStorage';

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

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

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

import { useLoaderData } from 'react-router-dom';

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

const { product } = useLoaderData();

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

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

เป็นดังนี้:

<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:

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

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

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

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

ให้นำแอปพลิเคชันที่คุณสร้างใน แบบฝึกหัดบทเรียนก่อนหน้ามาใช้ โดยอาศัย เนื้อหาจากบทเรียนนี้ จงนำ loader ไปใช้ เชื่อมต่อมัน แล้วใช้ ข้อมูลจากมันสำหรับหน้าข้อมูลนักศึกษา