T
TanStack•16mo ago
automatic-azure

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
3 Replies
eager-peach
eager-peach•16mo ago
where should the id be stored? as a path param or as a query param?
automatic-azure
automatic-azureOP•16mo ago
as a query params
eager-peach
eager-peach•16mo ago
please check the documentation: https://tanstack.com/router/v1/docs/framework/react/guide/search-params
Search Params | TanStack Router React Docs
Similar to how TanStack Query made handling server-state in your React applications a breeze, TanStack Router aims to unlock the power of URL search params in your applications. Why not just use URLSearchParams?

Did you find this page helpful?