T
TanStack•3y ago
ambitious-aqua

How do I show the index page when there are no route params?

I want to setup something like this: /posts -> index /posts/1 -> show My issue is, I am unsure how to setup my <Outlet /> 
const Posts = () => {
  ...
  return <>
    {posts.map(post => <Post post={posts} />)}
    {/* Where do I put the outlet? I only want the Posts or the Single post to show */}
  </>
} 

export const postsRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/posts',
  component: Posts,
})

export const postRoute = new Route({
  getParentRoute: () => postsRoute,
  path: '$postId',
  component: Post,
})

const routeTree = rootRoute.addChildren([
  indexRoute,
  postsRoute.addChildren([postRoute]),
])
const Posts = () => {
  ...
  return <>
    {posts.map(post => <Post post={posts} />)}
    {/* Where do I put the outlet? I only want the Posts or the Single post to show */}
  </>
} 

export const postsRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/posts',
  component: Posts,
})

export const postRoute = new Route({
  getParentRoute: () => postsRoute,
  path: '$postId',
  component: Post,
})

const routeTree = rootRoute.addChildren([
  indexRoute,
  postsRoute.addChildren([postRoute]),
])
3 Replies
xenial-black
xenial-black•3y ago
I'm making assumptions, but I'm assuming you want to show them as two separate pages and there is little to no overlap on UI. I think you can do something like this 
export const postsRootRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/posts',
})

export const postsRoute = new Route({
  getParentRoute: () => postsRootRoute,
  path: '',
  component: Posts,
})

export const postRoute = new Route({
  getParentRoute: () => postsRootRoute,
  path: '$postId',
  component: Post,
})
export const postsRootRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/posts',
})

export const postsRoute = new Route({
  getParentRoute: () => postsRootRoute,
  path: '',
  component: Posts,
})

export const postRoute = new Route({
  getParentRoute: () => postsRootRoute,
  path: '$postId',
  component: Post,
})
If there is overlapping UI then you can create a component for postsRootRoute and put the outlet in there where you'd want it (ie. after common Nav/contextual UI)
ambitious-aqua
ambitious-aquaOP•3y ago
Ah okay, this looks like what I was looking for! Thank you! Looks like I am getting Invariant failed It doesn't like the path: '' line @Bryant It works if i change path: '' to path: '/'
xenial-black
xenial-black•3y ago
Glad to hear it worked!

Did you find this page helpful?