TanStack•2y ago•

6 replies

dead-brown

How to use useSearch from multiple routes?

I have two routes

/posts

/posts

and

/posts/$pId

/posts/$pId

. The

/posts

/posts

route defines search params with

validateSearch

validateSearch

.

In a custom hook I use

getRouteApi("/posts")

getRouteApi("/posts")

to receive the

useSearch

useSearch

hook and access the search params. That's fine so far:

const route = = getRouteApi("/posts/");

export function useGetPosts() {
  const userId = route.useSearch({
    select: (s) => s.user_id,
  });

  // do stuff with user_id from URL
}

const route = = getRouteApi("/posts/");

export function useGetPosts() {
  const userId = route.useSearch({
    select: (s) => s.user_id,
  });

  // do stuff with user_id from URL
}

When I create links to

/posts/$pId

/posts/$pId

, I always copy all search params to the new link so that they are available in the URL also when

/posts/$pId

/posts/$pId

is active. But when I use my custom hook in a component that is rendered when

/posts/$pId

/posts/$pId

is active,

useSearch

useSearch

fails with

Invariant failed: Could not find an active match from "/posts/"

Invariant failed: Could not find an active match from "/posts/"

Is there any way that i can access the search params in a typesafe way from two different routes, that share the same search params?

Thanks a lot!

TanStack•2y ago•

6 replies

dead-brown

How to use useSearch from multiple routes?

I have two routes

/posts

/posts

and

/posts/$pId

/posts/$pId

. The

/posts

/posts

route defines search params with

validateSearch

validateSearch

.

In a custom hook I use

getRouteApi("/posts")

getRouteApi("/posts")

to receive the

useSearch

useSearch

hook and access the search params. That's fine so far:

const route = = getRouteApi("/posts/");

export function useGetPosts() {
  const userId = route.useSearch({
    select: (s) => s.user_id,
  });

  // do stuff with user_id from URL
}

const route = = getRouteApi("/posts/");

export function useGetPosts() {
  const userId = route.useSearch({
    select: (s) => s.user_id,
  });

  // do stuff with user_id from URL
}

When I create links to

/posts/$pId

/posts/$pId

, I always copy all search params to the new link so that they are available in the URL also when

/posts/$pId

/posts/$pId

is active. But when I use my custom hook in a component that is rendered when

/posts/$pId

/posts/$pId

is active,

useSearch

useSearch

fails with

Invariant failed: Could not find an active match from "/posts/"

Invariant failed: Could not find an active match from "/posts/"

Is there any way that i can access the search params in a typesafe way from two different routes, that share the same search params?

Thanks a lot!

How to use useSearch from multiple routes?

Similar Threads

How to use useSearch from multiple routes?

Similar Threads

Similar Threads

Similar Threads