adverse-sapphire

using useSearch in a component, in fileBasedRouting

in the esxample in the screenshot https://tanstack.com/router/v1/docs/framework/react/examples/kitchen-sink-react-query-file-based you are using Route.useSearch() to get to the searchParams.. altough i realize that thisn is not cleanest, i'd like to use searchparams from the route in some of my components that are outisde of the route file. should I just import Route in my components? and if I have to import 2 routes, then i do named import? (is it even possible to use search params of 2 routes simoultnously?)

React Router Kitchen Sink React Query File Based Example | TanStack...

An example showing how to implement Kitchen Sink React Query File Based in React Router

5 Replies

adverse-sapphire•2y ago

The Route doesn't have to me imported. You could also use the getRouteApi helper to have those hooks returned.

const routeApi = getRouteApi("/_layout/whatever")

// this will be fully-typed
routeApi.useSearch();
routeApi.useParams();

const routeApi = getRouteApi("/_layout/whatever")

// this will be fully-typed
routeApi.useSearch();
routeApi.useParams();

Just make sure the components consuming this routeApi, are being rendered on the same route and aren't trying to access this routes hooks whilst being rendered on something else.

adverse-sapphireOP•2y ago

wow i didn't know abut getRouteApi was trying to do: useSearch({from:"...."}) but i wasn't getting typescript to work

adverse-sapphireOP•2y ago

yesss

adverse-sapphireOP•2y ago

it works

adverse-sapphire•2y ago

🙌🏼

Gaming

Programming

using useSearch in a component, in fileBasedRouting

Did you find this page helpful?