Outlet is not displaying as expected

Hello,
I have created a route tree using the following folder structure

routes
 ┣ app
 ┃ ┣ dashboard.tsx
 ┃ ┗ index.tsx
 ┣ auth
 ┃ ┣ index.tsx
 ┃ ┗ sign-up.tsx
 ┣ __root.tsx
 ┣ about.tsx
 ┗ index.tsx

routes
 ┣ app
 ┃ ┣ dashboard.tsx
 ┃ ┗ index.tsx
 ┣ auth
 ┃ ┣ index.tsx
 ┃ ┗ sign-up.tsx
 ┣ __root.tsx
 ┣ about.tsx
 ┗ index.tsx

routes
 ┣ app
 ┃ ┣ dashboard.tsx
 ┃ ┗ index.tsx
 ┣ auth
 ┃ ┣ index.tsx
 ┃ ┗ sign-up.tsx
 ┣ __root.tsx
 ┣ about.tsx
 ┗ index.tsx

routes
 ┣ app
 ┃ ┣ dashboard.tsx
 ┃ ┗ index.tsx
 ┣ auth
 ┃ ┣ index.tsx
 ┃ ┗ sign-up.tsx
 ┣ __root.tsx
 ┣ about.tsx
 ┗ index.tsx

this is my app/index.tsx

import { createFileRoute, Link, Outlet } from '@tanstack/react-router'

export const Route = createFileRoute('/app/')({
  component: Home,
})

function Home() {
  return <div>
    SIDEBAR
    <Link to='/app/dashboard'>Dashboard</Link>
    <Outlet />
  </div>
}

import { createFileRoute, Link, Outlet } from '@tanstack/react-router'

export const Route = createFileRoute('/app/')({
  component: Home,
})

function Home() {
  return <div>
    SIDEBAR
    <Link to='/app/dashboard'>Dashboard</Link>
    <Outlet />
  </div>
}

import { createFileRoute, Link, Outlet } from '@tanstack/react-router'

export const Route = createFileRoute('/app/')({
  component: Home,
})

function Home() {
  return <div>
    SIDEBAR
    <Link to='/app/dashboard'>Dashboard</Link>
    <Outlet />
  </div>
}

import { createFileRoute, Link, Outlet } from '@tanstack/react-router'

export const Route = createFileRoute('/app/')({
  component: Home,
})

function Home() {
  return <div>
    SIDEBAR
    <Link to='/app/dashboard'>Dashboard</Link>
    <Outlet />
  </div>
}

and this is my app/dashboard.tsx

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/app/dashboard')({
  component: Home,
})

function Home() {
  return <div>
    Dashboard
  </div>
}

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/app/dashboard')({
  component: Home,
})

function Home() {
  return <div>
    Dashboard
  </div>
}

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/app/dashboard')({
  component: Home,
})

function Home() {
  return <div>
    Dashboard
  </div>
}

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/app/dashboard')({
  component: Home,
})

function Home() {
  return <div>
    Dashboard
  </div>
}

For reference this is my __root.tsx

import { createRootRoute, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'

export const Route = createRootRoute({
  component: () => (
    <main>
      ROOT
      <Outlet />
      <TanStackRouterDevtools />
    </main>
  ),
})

import { createRootRoute, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'

export const Route = createRootRoute({
  component: () => (
    <main>
      ROOT
      <Outlet />
      <TanStackRouterDevtools />
    </main>
  ),
})

import { createRootRoute, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'

export const Route = createRootRoute({
  component: () => (
    <main>
      ROOT
      <Outlet />
      <TanStackRouterDevtools />
    </main>
  ),
})

import { createRootRoute, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'

export const Route = createRootRoute({
  component: () => (
    <main>
      ROOT
      <Outlet />
      <TanStackRouterDevtools />
    </main>
  ),
})

The issue is that the Outlet for the root works as expected and the text ROOT is always visible. The issue comes from using Outlet in the app folder. I expected to have the SIDEBAR text always visible for all child routes of app. However the issue is that the SIDEBAR text dissapears when going to the /app/dashboard endpoint
Workflow
1. Go to root
2. Press the app link
3. Press the dashboard link
As you can see in the attached images this is not what i want but i cannot understand where i am making the mistake for such a basic functionality. Any help is appreciated

Outlet is not displaying as expected

Similar Threads

Similar Threads

Similar Threads