TanStackT
TanStack•11mo ago•
2 replies
brilliant-lime

Match route on search params?

I'd like to render either of two components depending on if a search parameter is present.

For example:
- /books should render component <BookList />
createRoute({
  getParentRoute: () => rootRoute,
  path: "/books",
  component: () => <Books />,
  });


- /books?id=123 should render component <Book id={123} />
createRoute({
  getParentRoute: () => rootRoute,
  path: "/books",
  
  // [some way to match if id is present]
  
  component: ({id}) => <Book id={id} />,
  });


(I have no control over the URL structure and cannot, say, change to something like path params)

Is this achievable with createRoute? I could do this with logic inside common parent component, but this feels brittle and feels like it is a responsibility of the router.
Was this page helpful?