TanStack•2y ago•

18 replies

radical-lime

File structure for nested breadcrumbs [solved]

I have an app with 3 main routes, the

index.tsx

index.tsx

which is exposed under the

__root.tsx

__root.tsx

in the same directory level, one called organizations, and a third. On the root layout I have my shared navbar in the layout, but in the organizations route, I can dive 5 levels deeper. I am having some difficulty figuring out the file structure here for File Based Routing. On the root of the

/organizations

/organizations

route I want to include a shared breadcrumb that is persistent on all child routes. I want the file structure to look something like this

__root.tsx
index.tsx
organizations
  _index.tsx (should be organizations layout with shared breadcrumbs and Outlet. Also show one component that is specific to the /organizations route)
  (office)
    $officeId.tsx
    (group)
      $groupId.tsx)

__root.tsx
index.tsx
organizations
  _index.tsx (should be organizations layout with shared breadcrumbs and Outlet. Also show one component that is specific to the /organizations route)
  (office)
    $officeId.tsx
    (group)
      $groupId.tsx)

But if I have this in my

_index.tsx

_index.tsx

for the organizations folder

export const Route = createFileRoute('/organizations/_index')({
  component: OrganizationsLayout,
});

function OrganizationsLayout() {
  <Grid gutter="md">
    <GridCol>breadcrumbs placeholder</GridCol>
    <Outlet />
  </Grid>;
}

export const Route = createFileRoute('/organizations/_index')({
  component: OrganizationsLayout,
});

function OrganizationsLayout() {
  <Grid gutter="md">
    <GridCol>breadcrumbs placeholder</GridCol>
    <Outlet />
  </Grid>;
}

nothing renders on

/organizations

/organizations

in my app. And I also have a component I want to render just on the

/organizations

/organizations

page as well and I don't know where to place that

TanStack•2y ago•

18 replies

radical-lime

File structure for nested breadcrumbs [solved]

I have an app with 3 main routes, the

index.tsx

index.tsx

which is exposed under the

__root.tsx

__root.tsx

/organizations

/organizations

route I want to include a shared breadcrumb that is persistent on all child routes. I want the file structure to look something like this

__root.tsx
index.tsx
organizations
  _index.tsx (should be organizations layout with shared breadcrumbs and Outlet. Also show one component that is specific to the /organizations route)
  (office)
    $officeId.tsx
    (group)
      $groupId.tsx)

__root.tsx
index.tsx
organizations
  _index.tsx (should be organizations layout with shared breadcrumbs and Outlet. Also show one component that is specific to the /organizations route)
  (office)
    $officeId.tsx
    (group)
      $groupId.tsx)

But if I have this in my

_index.tsx

_index.tsx

for the organizations folder

export const Route = createFileRoute('/organizations/_index')({
  component: OrganizationsLayout,
});

function OrganizationsLayout() {
  <Grid gutter="md">
    <GridCol>breadcrumbs placeholder</GridCol>
    <Outlet />
  </Grid>;
}

export const Route = createFileRoute('/organizations/_index')({
  component: OrganizationsLayout,
});

function OrganizationsLayout() {
  <Grid gutter="md">
    <GridCol>breadcrumbs placeholder</GridCol>
    <Outlet />
  </Grid>;
}

nothing renders on

/organizations

/organizations

in my app. And I also have a component I want to render just on the

/organizations

/organizations

page as well and I don't know where to place that

File structure for nested breadcrumbs [solved]

Similar Threads

File structure for nested breadcrumbs [solved]

Similar Threads

Similar Threads

Similar Threads