T
TanStack•14mo ago
metropolitan-bronze

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
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>
}
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>
}
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>
  ),
})
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
No description
No description
No description
1 Reply
rival-black
rival-black•14mo ago
Your index route is not a wrapper for everything below it. You need have that Outlet in one of these locations. - src/routes/app.tsx - src/routes/app/route.tsx https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#file-naming-conventions https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts
Routing Concepts | TanStack Router React Docs
TanStack Router supports a number of powerful routing concepts that allow you to build complex and dynamic routing systems with ease. The Root Route
File-Based Routes | TanStack Router React Docs
Most of the TanStack Router documentation is written for file-based routing. This guide is mostly intended to help you understand in more detail how to configure file-based routing and the technical details behind how it works. Prerequisites

Did you find this page helpful?