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

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

I am trying to mirror the idea of how the

posts.tsx

posts.tsx

and

post.index.tsx

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

Invariant failed: Duplicate routes found with id: /$account_id/home

Here is the

home.tsx

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

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?

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

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

I am trying to mirror the idea of how the

posts.tsx

posts.tsx

and

post.index.tsx

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

Invariant failed: Duplicate routes found with id: /$account_id/home

Here is the

home.tsx

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

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?

Layouts with an index

Similar Threads

Layouts with an index

Similar Threads

Similar Threads

Similar Threads