T
TanStack•10mo ago
harsh-harlequin

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 />,
  });
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} />,
  });
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.
2 Replies
foreign-sapphire
foreign-sapphire•10mo ago
no, you would need to manually dispatch based on the presence of the search param
harsh-harlequin
harsh-harlequinOP•10mo ago
Ok, thank you!

Did you find this page helpful?