How to mock getRouteApi ?

Hey guys,

So I have the following component that uses the

getRouteApi

getRouteApi

to grab the teamId from the url. This component works very well when I render it in

/teams/:teamId

/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

getRouteApi

the component will not render outside of the

/teams/:teamId

/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

useQuery

without any problems.

TanStack•13mo ago•

9 replies

forward-apricot

How to mock getRouteApi ?

Hey guys,

So I have the following component that uses the

getRouteApi

getRouteApi

to grab the teamId from the url. This component works very well when I render it in

/teams/:teamId

/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

getRouteApi

the component will not render outside of the

/teams/:teamId

/teams/:teamId

useQuery

useQuery

without any problems.

How to mock getRouteApi ?

Similar Threads

How to mock getRouteApi ?

Similar Threads

Similar Threads

Similar Threads