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

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

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

routes/root.jsximport { getProducts } from '../forStorage'

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

routes/root.jsxexport async function loader() {
  const products = await getProducts();
  return { products };
}

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

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

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

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