wise-white

File structure for nested breadcrumbs [solved]

I have an app with 3 main routes, the index.tsx which is exposed under the __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 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 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 in my app. And I also have a component I want to render just on the /organizations page as well and I don't know where to place that

13 Replies

flat-fuchsia•15mo ago

Please provide a minimal complete example by forking one of the examples on stackblitz.

wise-whiteOP•15mo ago

Sure thing, I can do that. Stackblitz on the tanstack table page wont load. It does that periodically, an Idea how to get it from being stuck on 'cloning repo'

flat-fuchsia•15mo ago

table? why not router?

flat-fuchsia•15mo ago

see https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink-file-based

React TanStack Router Kitchen Sink File Based Example | TanStack Ro...

An example showing how to implement Kitchen Sink File Based in React using TanStack Router.

flat-fuchsia•15mo ago

lots of examples to choose from

wise-whiteOP•15mo ago

yeah router my bad. I'm using them all currently lol

flat-fuchsia•15mo ago

ah I see the same issue there have not seen this before

wise-whiteOP•15mo ago

been in that state for a few hours as far as i can tell i've seen it before a couple times but anyways.

flat-fuchsia•15mo ago

if it does not work, you can also provide a github repo with an example

wise-whiteOP•15mo ago

Gotcha. will just post an example once it's up

wise-whiteOP•15mo ago

Hey not sure if you'll see this but here's to hoping. https://stackblitz.com/edit/tanstack-router-buen1e?file=src%2Froutes%2F_layout%2F_organizations.tsx Again for reference I am trying to have 3 high level routes, and under the /organizations route progressively nested routes. In this instance I just have 3 levels - organizations > office > group. each page will have multiple components on it ( a table among other things) where the users can click an item to progress to a sub route. The ideal route structure is /organizations which would just be the parent route but also show the table, then /organizations/${officeId} which will still show the shared breadcrumbs for the organizations parent route, but also the components relavant to the ${officeId}, and then lastly the /organizations/${officeId}/${groupId} which would again show the shared breadcrumbs, but then the ${groupId} specific components.

Wyatt Protzman

StackBlitz

Router Basic File Based Example (forked) - StackBlitz

Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz

wise-whiteOP•15mo ago

Like a few things I don't understand yet is I really want to use the main /organizations route for one of the pages, but can't seem to figure how how to do that. If I add a _index.tsx under organizations folder it won't render. I saw other people mention the names need to match, but then it just uses /_organizations which isn't rendred. and then when using nested param routes, I get this from the auto tree gen

Hello /_layout/_organizations/(office)/(group)/$groupId!

Hello /_layout/_organizations/(office)/(group)/$groupId!

in the last child route. I understand why it isn't working since both (office) and (group) aren't rendered to the routes, thus this is essentially /${groupId} but again, don't know how to get the folder structure working here well I got the /organizations route working correctly showing it's child. but still can't seem to figure out the file structure for the subsequent children

wise-whiteOP•15mo ago

Okay I think I actually got it working. Wondering if this is the recommended approach, also now having trouble with the breadcrumbs. https://stackblitz.com/edit/tanstack-router-sgpvkq?file=src%2Froutes%2Forganizations%2F%24officeId%2Findex.tsx Wondering if there is something wrong with the file structure of the routes since the /organizations route is showing but also /organizations/

Wyatt Protzman

StackBlitz

File Based Nested param routes (forked) - StackBlitz

Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz

Gaming

Programming

File structure for nested breadcrumbs [solved]

Did you find this page helpful?