Outlet

• Framework
• Data
• Declarative

Summary

Reference Documentation ↗

Renders the matching child route of a parent route or nothing if no child route matches.

import { Outlet } from "react-router";

export default function SomeParent() {
  return (
    <div>
      <h1>Parent Content</h1>
      <Outlet />
    </div>
  );
}

Props

context

Provides a context value to the element tree below the outlet. Use when the parent route needs to provide values to child routes.

<Outlet context={myContextValue} />

Access the context with useOutletContext.