React Router + Vite Layout Not Rendering Nested Route

I’m using @react-router/dev with Vite for file-based routing. I expect my layout component (AdminLayout) to render text on the route /admin/dashboard, but it’s not showing up — only the dashboard content appears.

app/
├── routes.ts
├── routes/
│ └── admin/
│ ├── admin-layout.tsx
│ └── dashboard.tsx

routes.ts

```import { type RouteConfig, route } from "@react-router/dev/routes";

export default [
  route({
    path: "admin",
    file: "routes/admin/admin-layout.tsx",
    children: [
      route({
        path: "dashboard",
        file: "routes/admin/dashboard.tsx"
      })
    ]
  })
] satisfies RouteConfig;```

admin-layout.tsx

```import { Outlet } from "@react-router/dev";

export default function AdminLayout() {
  console.log("Rendering AdminLayout");
  return (
    <div className="flex">
      <aside className="w-64 hidden lg:block">Sidebar</aside>
      <main className="flex-1">
        <Outlet />
      </main>
    </div>
  );
}```

The Problem: Visiting /admin/dashboard shows the dashboard, but not the layout content.
console.log(“Rendering AdminLayout”) doesn’t appear — so the layout component isn’t rendering.

Question:
Why isn’t AdminLayout rendering for the nested route? Am I missing something in my route config or setup?

Thanks in advance!