Remix layouts across multiple pages

I am trying to create a layout for a dashboard that will always have the same sidebar and header. The only thing that should change on every page of the dashboard is the main content area.

routes/dashboard.tsx

import { Outlet } from "@remix-run/react";
import Header from "~/components/custom/dashboard/Header";
import Sidenav from "~/components/custom/Sidenav";

export function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
      <Sidenav />
      <div className="flex flex-col">
        <Header />
        <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
          <div className="flex items-center">
            <h1 className="text-lg font-semibold md:text-2xl">Test</h1>
          </div>
          <div
            className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
            x-chunk="dashboard-02-chunk-1"
          >
            <div className="flex flex-col items-center gap-1 text-center">
              <Outlet />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}

Then in dashboard._index.tsx

const Dashboard = () => {
  return (
    <h1>Welcome to the dashboard</h1>
  );
};

export default Dashboard;

If I then go to

http://localhost:5173/dashboard/

there is no sidebar or header, just the h1.

You've created the layout correctly, you just need to export your layout as default.

In routes/dashboard.tsx:

export default function DashboardLayout({ children }: { children: React.ReactNode }) {