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

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

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

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

]);

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

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

import { Outlet } from 'react-router-dom';

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

return (
	<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 ของเรา:

h1, h2 {
	margin: 0;
}

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

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

ใช้แอปพลิเคชันที่คุณสร้างในการมอบหมายงานของบทเรียนที่แล้ว โดยใช้เนื้อหาจากบทเรียนนี้ ให้ทำให้เส้นทางสำหรับหน้าข้อมูลนักศึกษาเป็นเส้นทางที่ซ้อนอยู่ภายในเส้นทางหลัก

และตอนนี้ให้ทำให้เมื่อคลิกที่ลิงก์แล้วบนหน้าจอจะแสดงทั้งรายชื่อนักศึกษาและหน้าข้อมูลนักศึกษา