Quantcast
Channel: Recent Questions - Stack Overflow
Viewing all articles
Browse latest Browse all 12111

How to wrap a Link component with type safety?

$
0
0

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 :(


Viewing all articles
Browse latest Browse all 12111

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>