เส้นทางที่ไม่มีเส้นทางใน React Router

ในบทเรียนนี้ เราจะพิจารณาคุณสมบัติที่เป็นประโยชน์อีกอย่างหนึ่งของเส้นทางที่ไม่มีเส้นทาง

คุณรู้ว่าสำหรับแต่ละอ็อบเจ็กต์เส้นทาง คุณสามารถเพิ่มคุณสมบัติ errorElement และกำหนดค่าเป็นองค์ประกอบที่คุณต้องการแสดงเมื่อเกิดข้อผิดพลาด

แต่ถ้า errorElement ของเราเหมือนกันสำหรับทุกเส้นทางล่ะ? แน่นอน คุณสามารถใส่ค่าเดียวกันซ้ำๆ ในแต่ละเส้นทาง หรือคุณสามารถใช้เส้นทางที่ไม่มีเส้นทาง, ห่อหุ้มเส้นทางลูกที่เราสนใจไว้ข้างในมันได้ แล้วในกรณีที่เกิดข้อผิดพลาดในเส้นทางใดเส้นทางหนึ่ง เส้นทางที่ไม่มีเส้นทางของเราจะดักจับและแสดง errorElement ของมันเอง

เข้าไปในไฟล์ main.jsx และห่อหุ้มเส้นทางลูกทั้งหมดของเราไว้ในเส้นทางที่ไม่มีเส้นทาง, ทำให้พวกมันเป็นลูกของมัน (ในทางกลับกัน เส้นทางนี้จะกลายเป็นลูกของรูท) อย่าลืมเพิ่มคุณสมบัติ errorElement ให้กับมันด้วย:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        errorElement: <ErrorPage404 />,
        children: [
          { index: true, element: <Index /> },
          {
            path: 'products/:productId',
            element: <Product />,
            loader: productLoader,
          },
          {
            path: 'products/:productId/edit',
            element: <EditProduct />,
            loader: editProductLoader,
            action: editAction,
          },
          {
            path: 'products/:productId/delete',
            action: deleteAction,
          },
        ],
      },
    ],
  },
]);

ตอนนี้จะตรวจสอบการทำงานของโค้ดนี้ได้อย่างไร? คุณสามารถเพิ่มบรรทัดที่โยนข้อผิดพลาด (อย่าลืมลบมันออกภายหลัง เมื่อคุณทดสอบเสร็จแล้ว) ตัวอย่างเช่น ลองเพิ่มมันเป็นบรรทัดแรกในฟังก์ชัน action สำหรับเส้นทางลบสินค้า, เมื่อพยายามลบสินค้า เราจะเห็นข้อผิดพลาด:

delete.jsxexport async function action({ params }) {
  throw new Error('error');
  await deleteProduct(params.productId);
  return redirect('/');
}

ตอนนี้ ลองลบสินค้าบางอย่างดู