Skip to content

[Docs]: Layout section is confusing #13270

Closed
@mingxinwei

Description

@mingxinwei

Describe what's incorrect/missing in the documentation

The layout section is confusing.

import {
  type RouteConfig,
  route,
  layout,
  index,
  prefix,
} from "@react-router/dev/routes";

export default [
  layout("./marketing/layout.tsx", [
    index("./marketing/home.tsx"),
    route("contact", "./marketing/contact.tsx"),
  ]),
  ...prefix("projects", [
    index("./projects/home.tsx"),
    layout("./projects/project-layout.tsx", [
      route(":pid", "./projects/project.tsx"),
      route(":pid/edit", "./projects/edit-project.tsx"),
    ]),
  ]),
] satisfies RouteConfig;

To see projects/home.tsx appear in the layout, we'll need an outlet:
./projects/project-layout.tsx

The question is the "./projects/home.tsx" is not inside "./projects/project-layout.tsx", why adding the outlet in the "./projects/project-layout.tsx" will show "./projects/home.tsx"?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions