Unmatched Segments & The Role of default.tsx

1// File Structure:
2// app/dashboard/
3// ├── layout.tsx         <- Receives children, @analytics, @team props
4// ├── page.tsx
5// ├── @analytics/
6// │   ├── page.tsx       <- Active on /dashboard
7// │   └── default.tsx    <- Fallback on refresh when route changes
8// └── @team/
9//     ├── page.tsx       <- Active on /dashboard
10//     ├── settings/
11//     │   └── page.tsx   <- Active on /dashboard/settings
12//     └── default.tsx    <- REQUIRED: renders when visiting /dashboard without matching @team
13
14// app/dashboard/layout.tsx
15export default function DashboardLayout({
16  children,
17  analytics,
18  team,
19}: {
20  children: React.ReactNode;
21  analytics: React.ReactNode;
22  team: React.ReactNode;
23}) {
24  return (
25    <div className="dashboard-grid">
26      <main>{children}</main>
27      <section className="slot-analytics">{analytics}</section>
28      <section className="slot-team">{team}</section>
29    </div>
30  );
31}
32
33// app/dashboard/@analytics/default.tsx
34export default function AnalyticsDefault() {
35  return <div>Analytics default overview (served on hard refresh)</div>;
36}