นี่คือฟีเจอร์ขั้นสูงสองประการของ App Router สำหรับเลย์เอาต์ UI ที่สปhisticated พวกเขาใช้ไวยากรณ์ของรูปแบบโฟลเดอร์ร่วมกัน
เส้นทางขนานช่วยให้เลย์เอาต์เดียวสามารถเรนเดอร์ "สล็อต" เส้นทางอิสระหลายรายพร้อมกัน โดยแต่ละอันมีสถานะการโหลด/ข้อผิดพลาดของตัวเอง คุณกำหนดสล็อตด้วยโฟลเดอร์ @name:
app/
layout.tsx
@team/page.tsx → a slot
@analytics/page.tsx → another slot
// app/layout.tsx — slots are passed as named props
export default function Layout({
children,
team, // ← @team slot
analytics, // ← @analytics slot
}: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) {
return <><nav /> {children} <aside>{team}{analytics}</aside></>;
}
แต่ละสล็อตเดินทางและโหลด อย่างอิสระ — ยอดเยี่ยมสำหรับ แดชบอร์ด ที่บานหน้าต่างอัปเดตแยกกันหรือแสดงสองส่วนพร้อมกัน
เส้นทางการสกัดกั้นช่วยให้คุณสามารถ "จับ" การนำทางและเรนเดอร์ ในบริบทปัจจุบัน (เช่น โมดัล) แทนเพจเต็มหน้า ในขณะที่ยังมี URL จริงที่สามารถแชร์ได้
app/feed/page.tsx
app/feed/(..)photo/[id]/page.tsx → intercepts /photo/[id] when navigated from the feed
app/photo/[id]/page.tsx → the full page (on direct visit / refresh)
Click a photo in the feed → opens as a MODAL over the feed (intercepted), URL = /photo/123
Refresh or share that URL → renders the FULL photo page (no interception)
ตัวทำเครื่องหมายการสกัดกั้น ((.) ระดับเดียวกัน (..) ขึ้นหนึ่ง (...) รูท) ควบคุมว่าส่วนใดถูกสกัดกั้น นี่คือวิธีการทำงานของรูปแบบ "Instagram-style — รูปภาพเปิดในโมดัล แต่มี URL ของตัวเอง"
เส้นทางขนานช่วยให้เลย์เอาต์มัลติ-เพน (แดชบอร์ด) ที่ซับซ้อนและโหลดอย่างอิสระจะสะอาด เส้นทางการสกัดกั้นนำเสนอรูปแบบ "โมดัลพร้อม URL จริง" (สามารถแชร์ ปลอดภัยสำหรับการรีเฟรช ใช้ได้กับปุ่มย้อนกลับ) ซึ่งอย่างอื่นจะยากต่อการสร้าง
พวกเขาเป็นสิ่งที่ขั้นสูง แต่พวกเขาแก้ปัญหา UX จริง — บานหน้าต่างอิสระและการวางแบบบริบท — ซึ่งก่อนหน้านี้ต้องการการทำงานแบบแมนนวลด้านการกำหนดเส้นทาง/สถานะค่อนข้างมาก