Advanced Routing Patterns
Menguasai Parallel Routes dan Intercepting Routes untuk membangun UI yang kompleks seperti Dashboard dan Modals.
1. Parallel Routes (`@folder`)
Parallel Routes memungkinkan Anda merender satu atau lebih halaman dalam layout yang sama secara bersamaan. Sangat berguna untuk dashboard yang memiliki banyak slot independen.
// Props akan menerima slot sebagai argumen
export default function Layout({
children,
analytics, // Dari folder @analytics
team, // Dari folder @team
}: {
children: React.ReactNode
analytics: React.ReactNode
team: React.ReactNode
}) {
return (
<>
{children}
<div className="grid grid-cols-2">
{analytics}
{team}
</div>
</>
)
}2. Intercepting Routes (`(.)folder`)
Memungkinkan Anda memuat rute di dalam layout saat ini tanpa berpindah konteks. Pola klasik: Menampilkan foto dalam modal saat diklik, tapi tetap bisa diakses langsung via URL.
(.) folder
Intercept rute di level yang sama.
(..) folder
Intercept rute satu level di atas.
Interactive Demo: The Modal Interceptor
Simulasi bagaimana rute di-intercept menjadi modal saat navigasi internal, namun tetap menjadi halaman penuh saat di-refresh.
Click a photo to see Intercepting Route in action.
Senior Tip: default.tsx
Saat menggunakan Parallel Routes, selalu siapkan file `default.tsx` untuk menangani status rute saat salah satu slot tidak memiliki halaman yang cocok selama navigasi.