Implementing Nested Routes Correctly in Lovable

Why nested routes fail to render child pages in Lovable

Nested routes let you share a common layout (like a sidebar or header) between multiple pages without duplicating code. In React Router, you define a parent route with a layout component, and child routes render inside that layout via the Outlet component. The most common failure is forgetting to add the Outlet component in the parent layout. Without Outlet, React Router has nowhere to render the child route's component — the layout appears but the page content area is blank. Another frequent issue is incorrect route nesting in App.tsx. Child routes must be JSX children of the parent Route element. If they are placed at the same level (siblings instead of children), React Router treats them as independent routes and does not apply the parent layout.

• Missing Outlet component in the parent layout — child routes have nowhere to render
• Routes not properly nested — child routes are siblings instead of children of the parent Route
• Parent route has an element with trailing path that matches too specifically
• Child route paths are absolute instead of relative — they do not inherit the parent prefix
• Index route missing — visiting the parent path shows nothing because no default child is defined

Error messages you might see

Before you start

• A Lovable project with multiple pages that should share a common layout
• React Router v6 (the default for all Lovable projects)
• An understanding of which pages should share which layout elements

How to fix it

// No shared layout — each page duplicates the sidebar
function Dashboard() {
  return (
    <div className="flex">
      <Sidebar />
      <main>Dashboard content</main>
    </div>
  );
}
function Analytics() {
  return (
    <div className="flex">
      <Sidebar />
      <main>Analytics content</main>
    </div>
  );
}

import { Outlet } from "react-router-dom";
import Sidebar from "@/components/Sidebar";
export default function DashboardLayout() {
  return (
    <div className="flex min-h-screen">
      <Sidebar />
      <main className="flex-1 p-8">
        {/* Child route components render here */}
        <Outlet />
      </main>
    </div>
  );
}

<Routes>
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/dashboard/analytics" element={<Analytics />} />
  <Route path="/dashboard/settings" element={<Settings />} />
</Routes>

<Routes>
  <Route path="/dashboard" element={<DashboardLayout />}>
    {/* Index route: renders at /dashboard */}
    <Route index element={<DashboardHome />} />
    {/* Child routes: render at /dashboard/analytics etc. */}
    <Route path="analytics" element={<Analytics />} />
    <Route path="settings" element={<DashboardSettings />} />
  </Route>
  <Route path="*" element={<NotFound />} />
</Routes>

<NavLink to="/dashboard/analytics">Analytics</NavLink>
<NavLink to="/dashboard/settings">Settings</NavLink>

import { NavLink } from "react-router-dom";
{/* Relative paths — automatically prepend the parent /dashboard */}
<NavLink
  to="analytics"
  className={({ isActive }) => isActive ? "bg-accent" : ""}
>
  Analytics
</NavLink>
<NavLink
  to="settings"
  className={({ isActive }) => isActive ? "bg-accent" : ""}
>
  Settings
</NavLink>

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route path="analytics" element={<Analytics />} />
</Route>

<Route path="/dashboard" element={<DashboardLayout />}>
  {/* Shows at /dashboard (no trailing path) */}
  <Route index element={<DashboardHome />} />
  <Route path="analytics" element={<Analytics />} />
</Route>

Complete code example

1import { Outlet, NavLink } from "react-router-dom";
2import { LayoutDashboard, BarChart3, Settings, LogOut } from "lucide-react";
3import { useAuth } from "@/contexts/AuthContext";
4
5export default function DashboardLayout() {
6  const { signOut } = useAuth();
7
8  const linkClass = ({ isActive }: { isActive: boolean }) =>
9    `flex items-center gap-3 px-4 py-2 rounded-md transition-colors ${
10      isActive
11        ? "bg-accent text-accent-foreground font-medium"
12        : "text-muted-foreground hover:bg-accent/50"
13    }`;
14
15  return (
16    <div className="flex min-h-screen">
17      {/* Sidebar — shared across all dashboard child routes */}
18      <aside className="w-64 border-r bg-card p-4 flex flex-col">
19        <h2 className="text-lg font-semibold px-4 mb-6">Dashboard</h2>
20        <nav className="flex flex-col gap-1 flex-1">
21          {/* Relative paths — React Router prepends /dashboard */}
22          <NavLink to="." end className={linkClass}>
23            <LayoutDashboard className="h-4 w-4" />
24            Overview
25          </NavLink>
26          <NavLink to="analytics" className={linkClass}>
27            <BarChart3 className="h-4 w-4" />
28            Analytics
29          </NavLink>
30          <NavLink to="settings" className={linkClass}>
31            <Settings className="h-4 w-4" />
32            Settings
33          </NavLink>
34        </nav>
35        <button
36          onClick={signOut}
37          className="flex items-center gap-3 px-4 py-2 text-muted-foreground hover:text-foreground"
38        >
39          <LogOut className="h-4 w-4" />
40          Sign out
41        </button>
42      </aside>
43
44      {/* Main content — child routes render here via Outlet */}
45      <main className="flex-1 p-8 overflow-auto">
46        <Outlet />
47      </main>
48    </div>
49  );
50}

Best practices to prevent this

• Always include an Outlet component in layout components — without it, child routes have nowhere to render
• Use relative paths in child Route definitions (path='analytics' not path='/dashboard/analytics') so they inherit the parent prefix
• Add an index route for every layout to handle the case when the user visits the parent path directly
• Use NavLink with the end prop for the index route link to prevent it from being active on all child routes
• Keep layouts focused — a layout should only contain shared UI like navigation, not page-specific content
• Nest Route elements as JSX children in App.tsx — placing them as siblings creates independent routes that skip the layout

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns