Skip to content

Layout doesn't apply to index route when using programatic routing. #3553

@stereosteve

Description

@stereosteve

When using fs routing routes/artists/_layout.tsx will apply to both routes/artists/index.tsx and routes/artists/[name].tsx.

But if I disable fs routing and do this in main.tsx:

app
  .layout("/artists", ArtistsLayout)
  .get("/artists", (ctx) => {
    return ctx.render(<ArtistList />)
  })
  .get("/artists/:name", (ctx) => {
    const artist = {
      name: ctx.params.name || "???",
    }
    return ctx.render(<ArtistDetail artist={artist} />)
  })
  .get("/artists/:name/albums", (ctx) => {
    const artist = {
      name: ctx.params.name || "???",
    }
    return ctx.render(<div>artist: {artist.name} album list</div>)
  })

ArtistLayout will apply to /artists/:name and /artists/:name/albums but not to the /artists index route.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions