faint-white

Child path not rendering

const root = new RootRoute({component: Root});
const index = new Route({
  getParentRoute: () => root,
  path: '/',
  component: Index,
});

const cdl = new Route({
  getParentRoute: () => root,
  path: 'cdl',
})

const cdlGet = new Route({
  getParentRoute: () => cdl,
  path: '$id',
  component: CdlDetail,
})

const cdlMoreDetail = new Route({
  getParentRoute: () => cdlGet,
  path: 'more',
  component: CdlMoreDetail,
})


cdl.addChildren(
  [cdlIndex, cdlCreate, cdlGet.addChildren([cdlMoreDetail])]
)

const root = new RootRoute({component: Root});
const index = new Route({
  getParentRoute: () => root,
  path: '/',
  component: Index,
});

const cdl = new Route({
  getParentRoute: () => root,
  path: 'cdl',
})

const cdlGet = new Route({
  getParentRoute: () => cdl,
  path: '$id',
  component: CdlDetail,
})

const cdlMoreDetail = new Route({
  getParentRoute: () => cdlGet,
  path: 'more',
  component: CdlMoreDetail,
})


cdl.addChildren(
  [cdlIndex, cdlCreate, cdlGet.addChildren([cdlMoreDetail])]
)

any clue why this doesn't work? It always renders the "cdlGet" route, but when I want to get to the "more" child route there's no effect. Path would be basically then

http://localhost:3000/cdl/52/more

http://localhost:3000/cdl/52/more

but it renders only the path up to the ID.

TanStack•3y ago

faint-white

Child path not rendering

const root = new RootRoute({component: Root});
const index = new Route({
  getParentRoute: () => root,
  path: '/',
  component: Index,
});

const cdl = new Route({
  getParentRoute: () => root,
  path: 'cdl',
})

const cdlGet = new Route({
  getParentRoute: () => cdl,
  path: '$id',
  component: CdlDetail,
})

const cdlMoreDetail = new Route({
  getParentRoute: () => cdlGet,
  path: 'more',
  component: CdlMoreDetail,
})


cdl.addChildren(
  [cdlIndex, cdlCreate, cdlGet.addChildren([cdlMoreDetail])]
)

const root = new RootRoute({component: Root});
const index = new Route({
  getParentRoute: () => root,
  path: '/',
  component: Index,
});

const cdl = new Route({
  getParentRoute: () => root,
  path: 'cdl',
})

const cdlGet = new Route({
  getParentRoute: () => cdl,
  path: '$id',
  component: CdlDetail,
})

const cdlMoreDetail = new Route({
  getParentRoute: () => cdlGet,
  path: 'more',
  component: CdlMoreDetail,
})


cdl.addChildren(
  [cdlIndex, cdlCreate, cdlGet.addChildren([cdlMoreDetail])]
)

any clue why this doesn't work? It always renders the "cdlGet" route, but when I want to get to the "more" child route there's no effect. Path would be basically then

http://localhost:3000/cdl/52/more

http://localhost:3000/cdl/52/more

but it renders only the path up to the ID.

Child path not rendering

Similar Threads

Child path not rendering

Similar Threads

Similar Threads

Similar Threads