TanStackT
TanStack•11mo ago•
2 replies
spotty-amber

Typescript Error with LinkComponent.. Best Practice?

Currently i am struggeling with the Link Component Type safety.

I have 3 routes that are using the same component for searching users on my plattform.


So since i also use search params with my search, i use the navigate function with replace to set up the search params.

const navigate = useNavigate({ from: routerLocation.to });

to let the router know where the user is, i have to use the from property in the useNavigate Hook. But regarding it can be 3 different routes i am a bit confused. I tried using a Route that i get via props. See example above.

But now the navigate function has a ts problem:

navigate({
      replace: true,
      search: (prevSearch) => ({
        ...prevSearch,
        distance,
        after,
        prev,
        tags,
        isAvailableForInternship: isAvailableForInternship,
        isAvailableForTraining: isAvailableForTraining,
        districtId,
      }),
    });


thats the function.

The error says:

(prevSearch: {     register?: string | undefined;     sb_company?: string | undefined;     sb_activity?: string | undefined;     sb_company_training?: string | undefined;     after?: string | undefined;     distance?: number | undefined;     ... 16 more ...;     place_id?: string | undefined; }) => { ...; }
is not assignable to type
true | ParamsReducerFn<Router<RootRoute<undefined, RouterContext, AnyContext, AnyContext, {}, undefined, RootRouteChildren, FileRouteTypes>, ... 4 more ..., Record<...>>, "SEARCH", any, string | undefined> | undefined


So in short the navigate function doesnt know where it is. I cannot find anything regarding this in the docs.
How would this be handled properly?
Was this page helpful?