การใช้ข้อมูลที่ได้รับจาก Loader ใน React Router

ในบทเรียนที่แล้ว เราได้รับข้อมูลจาก ที่เก็บข้อมูลด้วย loader เพื่อที่จะ ใช้ข้อมูลเหล่านี้ เราใช้ Hook useLoaderData เปิด ไฟล์ root.jsx และเพิ่ม Hook ในการนำเข้า:

routes/root.jsximport { Outlet, Link, useLoaderData } from 'react-router-dom';

ในฟังก์ชัน Root ตอนนี้เราจะได้รับ ข้อมูลในค่าคงที่ products และ ทำงานกับมัน หากเรามี ผลิตภัณฑ์บ้าง รายการจะแสดงผล หากไม่มี เราจะแสดงในย่อหน้า 'no products here ...' ในแท็ก nav ตอนนี้เราใช้ การวนลูปมาตรฐานเพื่อแสดง ผลิตภัณฑ์ที่ได้รับ แต่ละองค์ประกอบจะถูกห่อหุ้ม ในคอมโพเนนต์ Link และที่อยู่จะ เป็นของแต่ละอัน (เราจะพูดถึงเรื่องนี้ ในภายหลัง) ดังนั้น หากผลิตภัณฑ์ ไม่มีชื่อ จะแสดง 'Unnamed' เป็นค่าเริ่มต้น ดังนั้น จากที่กล่าวมาข้างต้น ตอนนี้โค้ดของเราสำหรับฟังก์ชัน Root จะเป็นดังนี้:

root.jsxfunction Root() {

  const { products } = useLoaderData();
  return (
    <div id="main">
      {products.length ? (
        <nav>
          {products.map((product) => (
            <Link key={product.id} to={`products/${product.id}`}>
              {product.name ? product.name : <i>Unnamed</i>}
            </Link>
          ))}
        </nav>
      ) : (
        <p><i>no products here ...</i></p>
      )}
      <div id="product">
        <Outlet />
      </div>
    </div>
  );
}

หากตอนนี้เราเริ่มต้นแอปพลิเคชันใหม่ และเข้าไปที่หน้าแรก เราจะเห็น เพียง 'no products here ...' เนื่องจากเราไม่ได้วาง ผลิตภัณฑ์ใดๆ ลงในที่เก็บข้อมูลเลย