Layout in folder doesn't work

[WailRoth]

Describe the bug

Currently this works
/_layout/login.tsx -> /login
auth._layout.login.tsx -> /auth/login

Its just that this doesn't work
/auth/_layout/login.tsx -> /auth/layout/login

As you can see on the reproduction link, the _layout in the /auth/ folder is totally ignored by the router, ignoring my layout.

Your Example Website or App

https://stackblitz.com/~/edit/github-odjbcq-wjavnw?file=src%2Froutes%2F__root.tsx

Steps to Reproduce the Bug or Issue

Go on /auth/login, the layout isn't applied.

Expected behavior

Apply the layout on /auth/_layout pages

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: [Edge]
• Version 114.0.1823.82 (Version officielle) (arm64)

Additional context

No response

[SeanCassiere]

For more context, this bug report is part of this Discord thread.

The problem is that the router-cli (vite-plugin) incorrectly infers the routing structure of a layout route when it is nested in a parent route.

✅ When the layout route is defined at the root, it generates the route tree correctly. Example

src/routes
  _layout.tsx
  _layout/auth.login.tsx // generates the route /auth/login
  _layout/auth.register.tsx // generates the route /auth/register
  ...

✅ It also works correctly when flat files are used.

src/routes
  auth._layout.tsx
  auth._layout.login.tsx // generates the route /auth/login
  auth._layout.register.tsx // generates the route /auth/register
  ...

❌ However, when the layout is nested inside a parent folder is when stuff starts to break. Reproduction where stuff is broken

src/routes
  auth/
    _layout.tsx
    _layout/login.tsx // generates the route /auth/layout/login
    _layout/register.tsx // generates the route /auth/layout/register
  ...

✅ Weirdly enough, it works correctly if you define a route.tsx and index.tsx file within the auth route. Example

src/routes
  auth/
    route.tsx
    index.tsx
    _layout.tsx
    _layout/login.tsx // generates the route /auth/login
    _layout/register.tsx // generates the route /auth/register
  ...

🐞 My best guess is that this looks to be a bug with both the detection of layout routes and how file-routes get attached to the virtual routes.

[ferretwithaberet]

I have the same issue, this is my folder structure:

I would expect _BankAccounts to not be added to the URL while being used as a layout for everything under _BankAccounts/. What actually happens is that /BankAccounts gets added to the URL.

The generated code from routeTree.gen.ts looks like this:

const ErpCompanyIdSettingsBankAccountsBankAccountsRoute =
  ErpCompanyIdSettingsBankAccountsBankAccountsImport.update({
    path: '/settings/bank-accounts/BankAccounts',
    getParentRoute: () => ErpCompanyIdRoute,
  } as any).lazy(() =>
    import(
      './routes/erp/$companyId/settings/bank-accounts/_BankAccounts.lazy'
    ).then((d) => d.Route),
  )

Edit:

✅ Weirdly enough, it works correctly if you define a route.tsx and index.tsx file within the auth route. Example

src/routes
  auth/
    route.tsx
    index.tsx
    _layout.tsx
    _layout/login.tsx // generates the route /auth/login
    _layout/register.tsx // generates the route /auth/register
  ...

This does not seem to work in my case, I am using @tanstack/[email protected].

[divmgl]

Having this issue too. Nested layout routes are not working.

Projects and settings are inaccessible unless I move them out of the route. Pretty serious bug....... basically blocks development on this project.

The use case is that a protected route named _authenticated.workspace.$workspaceId should always redirect to _authenticated.workspace.$workspaceId.projects, but all inner routes need layouts too. So we need to be able to create a non-nested route _authenticated.workspace.$workspaceId_ that does the redirect, and a layout route _authenticated.workspace.$workspaceId._layout.

This doesn't work at all.

Edit: we figured out a way to get what we wanted but it's seriously convoluted. We now have a _authenticated.workspace.$workspaceId route that is both an <Outlet /> but also conditional redirect that checks pathname:

const { pathname } = useLocation()

workspaceId ??= activeWorkspaceId ?? Array.from(workspaceIds)[0]

if (pathname!.split("/").filter(Boolean).length <= 2 && workspaceId) {
  return <Navigate to={`/workspace/${workspaceId}/projects`} />
}

[brandonryan]

Dev-tools needs an update. Gets confused about nested index routes:

Router Dev Tools:

File Tree:

Thank you for this btw! Was the only thing holding me back from using this library for our production project.

[brandonryan]

I think it might actually be a bug with the route id?

[schiller-manuel]

can you please create a new issue?

[mwood23]

I think this is still broken? The tree gen isn't picking up on the _ in workspaceLayout

[alicantorun]

Is this issue really fixed? Still only works for me using the following structure recommended here, which feels hacky

[schiller-manuel]

@alicantorun can you please provide a minimal example by forking one of the examples on stackblitz ?
please also explain which workaround you consider "hacky" and would like to avoid.