How to Use Outlet in Remix for Nested Routes

In Remix, use the Outlet component to render child routes inside a parent route's layout. Place <Outlet /> where you want nested routes to appear, enabling nested UI and routing.

Syntax

The Outlet component is imported from @remix-run/react and used inside a parent route component. It acts as a placeholder where child routes render their content.

Basic syntax:

import { Outlet } from '@remix-run/react';

export default function Parent() {
  return (
    <div>
      <h1>Parent Layout</h1>
      <Outlet /> {/* Child routes render here */}
    </div>
  );
}

jsx

import { Outlet } from '@remix-run/react';

export default function Parent() {
  return (
    <div>
      <h1>Parent Layout</h1>
      <Outlet /> {/* Child routes render here */}
    </div>
  );
}

Example

This example shows a parent route with a header and an Outlet. The child route renders inside the Outlet, displaying its content below the header.

jsx

import { Outlet, Link } from '@remix-run/react';

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <Link to="stats">Stats</Link> | <Link to="settings">Settings</Link>
      </nav>
      <Outlet />
    </div>
  );
}

// Child route: routes/dashboard.stats.jsx
export default function Stats() {
  return <p>Stats content shown here.</p>;
}

// Child route: routes/dashboard.settings.jsx
export default function Settings() {
  return <p>Settings content shown here.</p>;
}

Output

Dashboard
Stats | Settings

[When navigating to /dashboard/stats]
Stats content shown here.

[When navigating to /dashboard/settings]
Settings content shown here.

Common Pitfalls

• Not placing <Outlet /> in the parent route component will prevent child routes from rendering.
• Using Outlet outside of a route context causes errors because Remix expects it inside route components.
• Forgetting to define child routes in the file system or route config means Outlet has no content to render.

jsx

/* Wrong: No Outlet in parent */
export default function Parent() {
  return <div><h1>Parent</h1></div>;
}

/* Right: Outlet included */
import { Outlet } from '@remix-run/react';
export default function Parent() {
  return (
    <div>
      <h1>Parent</h1>
      <Outlet />
    </div>
  );
}

Quick Reference

• Import: import { Outlet } from '@remix-run/react'
• Use: Place <Outlet /> in parent route JSX
• Purpose: Renders child route content inside parent layout
• File system: Child routes must be nested in folders or named with dots (e.g., parent.child.jsx)

Key Takeaways

Always include <Outlet /> in parent route components to render nested child routes.

Import Outlet from @remix-run/react before using it.

Child routes render inside the Outlet placeholder based on the route hierarchy.

Without Outlet, nested routes will not display their content.

Define child routes properly in the file system to match the parent route structure.