manual-pink

How to mock getRouteApi ?

Hey guys, So I have the following component that uses the getRouteApi to grab the teamId from the url. This component works very well when I render it in /teams/:teamId.

const Team = () => {
  const params = routeApi.useParams();

  return params.teamId;
}
const routeApi = getRouteApi("/(teams)/teams_/$teamId");

const Team = () => {
  const params = routeApi.useParams();

  return params.teamId;
}
const routeApi = getRouteApi("/(teams)/teams_/$teamId");

However, now I want to show this component in my home page. And because I am using getRouteApi the component will not render outside of the /teams/:teamId page. Is there a way I could wrap this component and overwrite the router context and manually set a teamId ? I am using a similar pattern with react query, I have wrapped my landing page with a new queryClient with a bunch of dummy data, so that I can use useQuery without any problems.

6 Replies

sensitive-blue•7mo ago

However, now I want to show this component in my home page.

why? you mention "mock", is this describing a test scenario?

manual-pinkOP•7mo ago

no this is to render the component in my landing page I want to manually set the teamId in my landing page maybe mock isn't the right word my bad

sensitive-blue•7mo ago

ok, you probably are looking for the not-yet exsting { shouldThrow: false} option

sensitive-blue•7mo ago

https://github.com/TanStack/router/issues/3482

GitHub

shouldThrow option for useParams not working · Issue #3482 · TanSta...

Which project does this relate to? Router Describe the bug My current route - '/' Im trying to get page params like this: const route = getRouteApi('/_auth/users/$userId') export fu...

sensitive-blue•7mo ago

working on that

manual-pinkOP•7mo ago

very cool stuff thanks @Manuel Schiller for all of the work btw

Gaming

Programming

How to mock getRouteApi ?

Did you find this page helpful?