Render outlet in parent layout route v2

[forest briar]

Hi guys, I just started trying remix and I'm trying to create a dashboard with cards as outlets but the cards are not displayed in dashboard parent layout . I can access the outlet if I go to its url like dashboard/samplecard. I'm not sure what am I missing, any reference will be helpful.

routes >
_app.dashboard.tsx
export default function DashboardRoute() {
return (
<>
<Dashboard />
<Outlet />
</>
);
}

_app.dashboard.samplecard.tsx
export default function SampleCardDashboardRoute() {
return (
<>
<SampleCard />
</>
);
}

components >
Dashboard.tsx
export default function Dashboard() {
return (
<div>
Dashboard

</div>

);
}
SampleCard.tsx
export function SampleCard(props: ISampleCardProps) {
return (
<div>
<dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
<div className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
<dt className="truncate text-sm font-medium text-gray-500">
Data Count
</dt>
<dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
681
</dd>
</div>
</dl>
</div>
);
}

[eager kestrel]

It sounds like you already answered it somewhat. An Outlet is specifically for different routes to render within the Outlet. Are you hoping to add an Outlet inside the card elements? Thats the impression I get from your question title.

To reiterate and focus on what’s happening in your app. Currently you have a dashboard route that renders dashboard, then you have dashboard.samplecard which renders the dashboard with a samplecard underneath it when you visit the route “dashboard/samplecard”. This is expected behavior and the way you’ve named your routes is expected to make this happen with the v2 routing convention

[forest briar]

What you explain is the exact current behavior. I was expecting to have multiple cards in /dashboard route as outlets and have error boundaries on each outlet cards if possible.

The sample image below is what I'm trying to achieve. Only the third card shows error and not the whole dashboard route. Is this possible for /dashboard route?

[eager kestrel]

Well, if you want multiple cards you can make multiple Outlets, but getting specific data in each card is a bit difficult and idk if it’s possible to change the data in each. I think there’s something with keys for outlets but I haven’t personally done anything with that

I’d recommend against multiple Outlets and instead manage the error state for each yourself