Ремикс макетов на нескольких страницах

Я пытаюсь создать макет информационной панели, которая всегда будет иметь одну и ту же боковую панель и заголовок. Единственное, что должно измениться на каждой странице панели управления, — это основная область контента.

маршруты/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>
  );
}

Затем в приборной панели._index.tsx

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

export default Dashboard;

Если я затем пойду в

http://localhost:5173/панель мониторинга/

нет боковой панели или заголовка, только h1.