Having a Slug instead of id in the route url

Hi i wanted to know if it's possible to have a slug instead of the id in the url but get the id in the params to make some call in the loader. Something like this :

url :

http://localhost:3000/topic/real-estate

http://localhost:3000/topic/real-estate

in the code :

await navigate({
  to: '/topic/$topic',
  params: { topic: slug, id },
})

await navigate({
  to: '/topic/$topic',
  params: { topic: slug, id },
})

And in the route :

export const Route = createFileRoute('/topic/$topic/')({
  loader: ({ context: { queryClient }, params: { topic, id } }) => {
    return queryClient.ensureQueryData(
      postByTopicIdOptions(id),
    )
  },
  component: Topic,
})

export const Route = createFileRoute('/topic/$topic/')({
  loader: ({ context: { queryClient }, params: { topic, id } }) => {
    return queryClient.ensureQueryData(
      postByTopicIdOptions(id),
    )
  },
  component: Topic,
})

Thank you for your help

TanStack•2y ago•

4 replies

afraid-moccasin

Having a Slug instead of id in the route url

Hi i wanted to know if it's possible to have a slug instead of the id in the url but get the id in the params to make some call in the loader. Something like this :

url :

http://localhost:3000/topic/real-estate

http://localhost:3000/topic/real-estate

in the code :

await navigate({
  to: '/topic/$topic',
  params: { topic: slug, id },
})

await navigate({
  to: '/topic/$topic',
  params: { topic: slug, id },
})

And in the route :

export const Route = createFileRoute('/topic/$topic/')({
  loader: ({ context: { queryClient }, params: { topic, id } }) => {
    return queryClient.ensureQueryData(
      postByTopicIdOptions(id),
    )
  },
  component: Topic,
})

export const Route = createFileRoute('/topic/$topic/')({
  loader: ({ context: { queryClient }, params: { topic, id } }) => {
    return queryClient.ensureQueryData(
      postByTopicIdOptions(id),
    )
  },
  component: Topic,
})

Thank you for your help

Having a Slug instead of id in the route url

Similar Threads

Having a Slug instead of id in the route url

Similar Threads

Similar Threads

Similar Threads