เส้นทางซ้อนกันใน React Router

ในบทเรียนนี้เราจะทำความรู้จักกับ เส้นทางซ้อนกัน (Nested Routes) เริ่มต้นแอปพลิเคชันที่เราสร้างในบทเรียนที่แล้ว โดยการคลิกที่ลิงก์ต่าง ๆ เราจะเข้าสู่หน้าสินค้าแยกต่างหาก สมมติว่าเรารู้สึกว่าวิธีนี้ไม่สะดวก และเราอยากให้รายการสินค้าและหน้าสินค้าแสดงผลอยู่เคียงข้างกันบนหน้าจอเดียวเพื่อให้เห็นภาพมากขึ้น มาลองทำกันดู

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

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

]);

ลองคลิกที่ลิงก์อีกครั้ง แต่ทางด้านขวาของรายการสินค้าเรายังไม่เห็นอะไร ทั้งนี้เพราะเรายังไม่ได้บอกเส้นทางหลักว่าเราต้องการให้แสดงผลเส้นทางย่อยที่ไหน

เพื่อการแสดงผลองค์ประกอบของเส้นทางย่อยภายในเส้นทางหลัก เราจะใช้คอมโพเนนต์ Outlet มาดำเนินการนำเข้าจากไลบรารีในไฟล์สำหรับเส้นทางหลัก:

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

จากนั้นให้ใส่ไว้ใน div #product และเพิ่มเข้าไปในเลย์เอาต์สำหรับเส้นทางหลักท้ายสุดของโค้ด HTML หลังปิดแท็ก nav และให้ครอบโครงสร้างทั้งหมดด้วย div อีกชั้น #main:

routes/root.jsxreturn (
  <div id="main">
    <nav>
      <a href={`/products/1`}>Product1</a>
      <a href={`/products/2`}>Product2</a>
    </nav>
    <div id="product">
      <Outlet />
    </div>
  </div>
);

เมื่อคลิกที่ลิงก์ ตอนนี้เราจะเห็นทั้งรายการสินค้าและหน้าสินค้าแล้ว

มาลองเพิ่มสไตล์เล็กน้อยในไฟล์ index.css ของเรา:

index.cssh1, h2 {
  margin: 0;
}

div#main {
  display: flex;
  margin: 20px;
}

div#product {
  margin-left: 40px;
}