-
-
Notifications
You must be signed in to change notification settings - Fork 579
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ToOptions
etc. types unusable?
#1194
Comments
let to = '/';
useLinkProps({to}); |
I'm sorry, but that's not really a solution? I don't think this should be closed? Are you saying there's no way to store links separately in a type safe way? That seems like... bad. Based on my experience, this should definitely be possible. A simple solution would be to have a The same pattern is used in eg. Tanstack Query for I'm just not sure what the type of such a export type UseLinkPropsOptions<TRouteTree extends AnyRoute = RegisteredRouter['routeTree'], TFrom extends RoutePaths<TRouteTree> | string = string, TTo extends string = '', TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom, TMaskTo extends string = ''> = ..... |
What is "a link" exactly that you want to store in a "type safe way"? just the |
Everything that's in The example does demonstrate that at least |
I would actually be happy with just a single function that can make a literal turn into any one (pick what you like best) of the Anything else can be achieved by casting between the |
Even if the type can be inferred by such a helper function, how would you pass those links using props etc? function A() {
const myLink = linkHelper({to: '/foo/$fooId', params: { fooId: 'bar123'}});
// what should the type of myLink now be?
return <B link={myLink} />
}
interface BProps {
link: ??? // what to put here?
}
function B({link} : BProps) {
/// ...
}
|
Clearly, eg. The answer then, of course, is If that's somehow too complicated to fix, |
As a practical use case, a very simple and common example would be eg. in a design system, where you would have a component wrapping a link: function MyLinkLike({ link, renderAsButton, children } : { link: ???, ... }) {
const navigate = useNavigate();
return renderAsButton ?
<Button onPress={() => navigate(link)} /> :
<SomeOtherComponent><Link {...link}>{children}</Link></SomeOtherComponent>;
} The example code is obviously simplified and bad from various perspectives, but it demonstrates the basic issue. |
@schiller-manuel I believe this is still a valid issue/problem (so this shouldn't be closed?) Here's my current "implementation" that "works": export function link<
TRouteTree extends AnyRoute = RegisteredRouter["routeTree"],
TFrom extends RoutePaths<TRouteTree> | string = string,
TTo extends string = "",
TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
TMaskTo extends string = "",
>(options: UseLinkPropsOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>) {
return options as UseLinkPropsOptions;
}
const _testLink: UseLinkPropsOptions = link({ to: "/" }); I can contribute a solution if there is consensus on how to move forward. |
In my case, I have a reusable component that, once the user is done with it, needs to be able to route different places based on where it started. I pass a prop I call |
I had the same issue and after a bit of playing around I found this works: import { RouterProvider, createRouter, Link, ToOptions } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';
export const router = createRouter({
defaultPreload: 'intent',
routeTree
});
const MyLink = ({ link }: { link: ToOptions<typeof router> }) => {
return <Link {...link}>Testing</Link>
} |
|
Closing this for now, since we've moved over to pushing |
Can you link to the docs for this? I can't find any info on |
Describe the bug
It's not possible to use the
ToOptions
,UseLinkPropsOptions
etc. types to store a link in a variable. It seems to always result in a type error. This is in the "basic" example.(passing the exact same object to eg.
useLinkProps()
works fine)I'm not sure what the type of a link is supposed to be, as I can't find any other possibilities anywhere in the documentation? Links do need to be occasionally stored in variables...
(note that using
as const
to not have a type at all is not a solution, in this simple example it would be, but practically this type also needs to occur in parameters or props, which always need an explicit type.)Your Example Website or App
CodeSandbox example (based on "basic")
(edited, initial link was broken due to CodeSandbox bug...)
Steps to Reproduce the Bug or Issue
Check the Codesandbox.
Expected behavior
There's some type I can use to store links that I can then pass to eg.
useNavigate()
oruseLinkProps()
Screenshots or Videos
No response
Platform
all
Additional context
No response
The text was updated successfully, but these errors were encountered: