ตัวโหลดข้อมูลสำหรับเส้นทางใน React Router

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

เปิดไฟล์ root.jsx เพิ่มบรรทัดนำเข้า getProducts จาก forStorage.js ที่นี่:

import { getProducts } from '../forStorage'

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

export async function loader() {
	const products = await getProducts();
	return { products };
}

ตอนนี้มาเพิ่มการนำเข้าตัวโหลดของเราใน main.jsx กัน ตัวโหลดนี้จะเป็นสำหรับราก ดังนั้นเราจะตั้งชื่อมันว่า rootLoader:

import Root, { loader as rootLoader } from './routes/root';

และเพิ่มมันเข้าไปในออบเจ็กต์เส้นทางของเราในคุณสมบัติ loader:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		loader: rootLoader,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},
]);

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