T
TanStack•7mo ago
correct-apricot

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,
      }),
    });
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
(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?
2 Replies
useful-bronze
useful-bronze•7mo ago
Hello, if routes have the same search parameters you can probably add a to: '.' parameter to the navigate, to prevent TS from complaining.
correct-apricot
correct-apricotOP•7mo ago
@Tiago Thank you very much!

Did you find this page helpful?