optimistic-gold

Layouts with an index

I am trying to set up the following routes:

/$account_id/home.tsx
/$account_id/home.index.tsx

/$account_id/home.tsx
/$account_id/home.index.tsx

I am trying to mirror the idea of how the posts.tsx and post.index.tsx work in the file structure example on the site. But I am getting Invariant failed: Duplicate routes found with id: /$account_id/home Here is the home.tsx

import * as React from 'react'
import { FileRoute, Outlet } from '@tanstack/react-router'


export const route = new FileRoute('/$account_id/home').createRoute({
  component: () => {

    return (
      <div className="p-2">
        <h3>Home Layout </h3>
        <Outlet />
      </div>
      
    )
  },
})

import * as React from 'react'
import { FileRoute, Outlet } from '@tanstack/react-router'


export const route = new FileRoute('/$account_id/home').createRoute({
  component: () => {

    return (
      <div className="p-2">
        <h3>Home Layout </h3>
        <Outlet />
      </div>
      
    )
  },
})

And here is the home.index.tsx

import * as React from 'react'
import { FileRoute } from '@tanstack/react-router'


export const route = new FileRoute('/$account_id/home/').createRoute({
  component: () => {

    return (
      <div className="p-2">
        <h3> Home Index</h3>
      </div>
      
    )
  },
})

import * as React from 'react'
import { FileRoute } from '@tanstack/react-router'


export const route = new FileRoute('/$account_id/home/').createRoute({
  component: () => {

    return (
      <div className="p-2">
        <h3> Home Index</h3>
      </div>
      
    )
  },
})

How does this work with the posts example but not this one?

42 Replies

optimistic-goldOP•3y ago

So after investigating, this only seems to be an issue when there is a parameter in the URL , if I move this to the top of my routes, so it is just /home it works. But how do I get this to work when a sub route like this I thought it may have to do with the _ in the route, so I changed it to accountId and still get the same thing, what I have found is in the routeTree.gen.ts is this:

    "/$accountId/home": {
      parentRoute: typeof AccountIdRoute
    }
    "/$accountId/home/": {
      parentRoute: typeof AccountIdRoute
    }

    "/$accountId/home": {
      parentRoute: typeof AccountIdRoute
    }
    "/$accountId/home/": {
      parentRoute: typeof AccountIdRoute
    }

Which really isn't right. Maybe I just need to do it by hand for now? or is there an updated of the @tanstack/router-cli that fixes this? Or I could even look at contributing if someone wanted to point me where this is

correct-apricot•3y ago

Can you give me a psuedo hiearchy of what you're trying to achieve? The file router is... still getting upgraded here and there And this could be showing its infancy

optimistic-goldOP•3y ago

Sure:

/$accountId/home
/$accountId/home/tasks

/$accountId/home
/$accountId/home/tasks

I want home to have an index and a layout

correct-apricot•3y ago

Are you using directory structure or flat routes?

optimistic-goldOP•3y ago

Directory well a mix but I can use what ever you suggest

correct-apricot•3y ago

They should be equivalent let me type something

$accountId/
  home/
    index.tsx
    tasks.tsx

$accountId/
  home/
    index.tsx
    tasks.tsx

I believe that's the directory structure you'd want

optimistic-goldOP•3y ago

right, but where should the home layout live? as home.tsx in the $accoutnId folder

correct-apricot•3y ago

$accountId.tsx
$accountId/
  home.tsx
  home/
    index.tsx
    tasks.tsx

$accountId.tsx
$accountId/
  home.tsx
  home/
    index.tsx
    tasks.tsx

That should give you layouts for both account and home And in flat style:

$accountid.tsx
$accountid.home.tsx
$accountid.home.index.tsx
$accountid.home.tasks.tsx

$accountid.tsx
$accountid.home.tsx
$accountid.home.index.tsx
$accountid.home.tasks.tsx

I think

optimistic-goldOP•3y ago

yeah it is working in a sandbox app now that I am trying it, now got to figure out what I did different

correct-apricot•3y ago

👍 Feel free to @ me

optimistic-goldOP•3y ago

there are no issues that would get caused by like turborepo?

correct-apricot•3y ago

..... it's untested in turborepo, so I can't guaranty that I mean, maybe others have done it, but i personally haven't

optimistic-goldOP•3y ago

yeah I mean everything else is working fine

correct-apricot•3y ago

You could convert it to a manual routing config and see if it's still busted But that's not a "quick" task.

optimistic-goldOP•3y ago

AH I Managed to duplicate it in the sandbox so the $accountId also had a layout

optimistic-goldOP•3y ago

https://github.com/jmarbutt/tanstack-router-nesting-issue

GitHub

GitHub - jmarbutt/tanstack-router-nesting-issue

Contribute to jmarbutt/tanstack-router-nesting-issue development by creating an account on GitHub.

optimistic-goldOP•3y ago

@Tanner Linsley it seems to be only if I have a layout for the $accountId level also , that example is basicaly the route based example with those routes

correct-apricot•3y ago

Yep this is a bug It looks like the file-router isn't taking into acount the trailing slash when creating the route ID It will be a while before I can fix this I'm neck deep in some stuff at work that I can't ignore

optimistic-goldOP•3y ago

ok understandable I will just look at getting this configured manually

correct-apricot•3y ago

If you wanted to investigate that issue, I'd happily guide you async through the fix

optimistic-goldOP•3y ago

or if I can get it without some of the nesting yeah I would be more than happy to look at it just not sure where to look

correct-apricot•3y ago

It's also a bummer that I'm halfway through a refactor right now to handle parallel routes Which I also might roll back and just wait for 2.0

optimistic-goldOP•3y ago

ha I know how that goes I got fed up with some next routing issues so I decided to jump over

optimistic-goldOP•3y ago

I am guessing it is here https://github.com/TanStack/router/blob/b3c81b969b9ff7c6c618249f1f2d50620f476028/packages/router-cli/src/generator.ts#L370C99-L370C99

GitHub

router/packages/router-cli/src/generator.ts at b3c81b969b9ff7c6c618...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

correct-apricot•3y ago

Hmmm it actually could be more core...

optimistic-goldOP•3y ago

gotcha

correct-apricot•3y ago

Look at your generated file What does it say for those two routes? Do they appear to be conflicting in there?

optimistic-goldOP•3y ago

yeah it doesn't

correct-apricot•3y ago

I think it's lower level

optimistic-goldOP•3y ago

 "/$accountId/": {
      parentRoute: typeof AccountIdRoute
    }

 "/$accountId/": {
      parentRoute: typeof AccountIdRoute
    }

 "/$accountId": {
      parentRoute: typeof rootRoute
    }

 "/$accountId": {
      parentRoute: typeof rootRoute
    }

so that looks correct

correct-apricot•3y ago

Yeah What about the Object.assign's down below?

optimistic-goldOP•3y ago

Object.assign(AccountIdRoute.options, {
  path: "/$accountId",
  getParentRoute: () => rootRoute,
})

Object.assign(AccountIdRoute.options, {
  path: "/$accountId",
  getParentRoute: () => rootRoute,
})

But maybe this is the issue:

  AccountIdRoute.addChildren([
    AccountIdHomeRoute,
    AccountIdHomeIndexRoute,
    AccountIdHomeTasksRoute,
  ]),

  AccountIdRoute.addChildren([
    AccountIdHomeRoute,
    AccountIdHomeIndexRoute,
    AccountIdHomeTasksRoute,
  ]),

Shouldn't it be nesting it agian

correct-apricot•3y ago

Yes it should hmmm So maybe it is that function you referenced earlier

optimistic-goldOP•3y ago

yeah so it seems to be the cli for sure

correct-apricot•3y ago

You should try changing the source and see if it works

optimistic-goldOP•3y ago

This is like "who's on first" reading it by hand

correct-apricot•3y ago

Not sure what it could be

correct-apricot•3y ago

Log out the route tree here: https://github.com/TanStack/router/blob/b3c81b969b9ff7c6c618249f1f2d50620f476028/packages/router-cli/src/generator.ts#L164

GitHub

router/packages/router-cli/src/generator.ts at b3c81b969b9ff7c6c618...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

correct-apricot•3y ago

And see if the hierarchy there is correct

optimistic-goldOP•3y ago

I need to pull it down and try to run it manually Yeah I am not sure how to run the CLI locally to debug it @Tanner Linsley how do you run this locally against a project to debug? apparently I am not smart enough to run the CLI @Tanner Linsley I think I finally figured it out, it came down to the sort order when checking the hasParent this fixes the issue for me. But there may be other issues that I haven't checked yet

correct-apricot•3y ago

Nice! Already merged

optimistic-goldOP•3y ago

Awesome! that was a tricky one without doing some major

Gaming

Programming

Layouts with an index

Did you find this page helpful?