There is a Link component in @tanstack/react-router. I want to nest (wrap) this component into my own component(s).
How can I do this and keep the type-safety which it provides?
This is example of the structure
interface ContainerProps { to: // What type should be here? param: // What type should be here?}function Container (props: ContainerProps) { return <WrappedLink to={props.to} params={props.params} />}interface WrapperProps { // What should be here?}function WrappedLink(props: PropsWithChildren<WrapperProps>) { return <Link {...props}>{props.children}</Link>}
This is how it should be used
function Page() { const params = page1.useParams() return <Container to={page2.to} params={params.foo} /> // NOTE: TypeScript should autosuggest what values are available}
This is component hierarchy for simplicity
Page (pass `to` & `params`)- Container (pass `to` & `params`) - Wrapper (pass `to` & `params`) - Link
P.S. I checked other posts here on StackOverflow, but didn't find a solution :(