TanStackT
TanStack•3y ago•
81 replies
wet-aqua

Layouts with an index

I am trying to set up the following routes:

/$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>
      
    )
  },
})


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>
      
    )
  },
})


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