Passing premade link to Link component
I am using Tanstack Router in a repo with the backend containing some basic routes. Those routes are built in the backend and passed to the frontend, so I do not need to generate any more parameters or the like.
However, I've run into an issue where trying to add it into a link like
Would simply result as a
href="#" as output. Can I somehow preserve the functionality of the Link component ( no refresh of the window ) while passing it a premade link?10 Replies
useful-bronze•4mo ago
what is a "premade link" ?
need some examples here
absent-sapphireOP•4mo ago
Link:
/persons/$personId
I receive:
/persons/abcdef
so premade in this context means with filled out parameters
but a valid route in the applicationuseful-bronze•4mo ago
you could parse the string using router and then supply normal props to the link
absent-sapphireOP•4mo ago
parse the string? With a custom parser or is there an inbuilt function?
eastern-cyan•4mo ago
Why dont just use href? I thinks that's what you are looking for, you can pass it a final link
absent-sapphireOP•4mo ago
because the link component demands a
to as required prop. Did you mean somewhere else to use it?eastern-cyan•4mo ago
i think that may be a bug? i had some href links at some point but they are showing a ts error now, but the href docs say
This can be used instead of to to navigate to a fully built href, e.g. pointing to an external target.
So i think it should work
absent-sapphireOP•4mo ago
maybe the docs meant in
useNavigate? Since to is optional there
but interesting ... so you've implemented it before no problem?eastern-cyan•4mo ago
yea i thought so but i must have changed it, i think it should work on both, useNavigate and Link, the props should work the same for these
i think its a bug, i can see:
export type MakeToRequired<TRouter extends AnyRouter, TFrom extends string, TTo extends string | undefined> = string extends TFrom ? string extends TTo ? OptionalToOptions<TRouter, TFrom, TTo> : TTo & CatchAllPaths<TRouter> extends never ? RequiredToOptions<TRouter, TFrom, TTo> : OptionalToOptions<TRouter, TFrom, TTo> : OptionalToOptions<TRouter, TFrom, TTo>;
this should make it optional but its not workinguseful-bronze•4mo ago
not a bug
href is not a prop you set on the link
router.matchRoutes should do it