T
TanStack•2w ago
foreign-sapphire

Is it possible to create a type of a subset of the routes for LinkOptions?

Lets say we have these routes 
/inbox
/inbox/$emailId
/clients
/clients/$clientUuid
/clients/$clientUuid/inbox
/clients/$clientUuid/inbox/$emailId
/inbox
/inbox/$emailId
/clients
/clients/$clientUuid
/clients/$clientUuid/inbox
/clients/$clientUuid/inbox/$emailId
inside inbox im rendering an email card component, this card has multiple links inside. whether im rendering this component inside /inbox i want the links to go to /inbox/$emailId and when im in /clients/$clientUuid/inbox i want the link to go to /clients/$clientUuid/inbox/$emailId so i want to pass in props like LinkOptions but only for these routes, and when im in the client inbox it should highlight that i should add the clientUuid prop
2 Replies
old-apricot
old-apricot•2w ago
so to should depend on from?
foreign-sapphire
foreign-sapphireOP•2w ago
Not really Basically i want to type props for a component like 
type EmailCardProps = {
  link: LinkOptions<'/inbox/$emailId' | '/clients/$clientUuid/inbox/$emailId' >
}

<EmailCard link={{ to: 'inbox/$emailId', params: { emailId: 1 } }} />
<EmailCard link={{ to: '/clients/$clientUuid/inbox/$emailId', params: { emailId: 1, clientUuid: 1 } }} />
type EmailCardProps = {
  link: LinkOptions<'/inbox/$emailId' | '/clients/$clientUuid/inbox/$emailId' >
}

<EmailCard link={{ to: 'inbox/$emailId', params: { emailId: 1 } }} />
<EmailCard link={{ to: '/clients/$clientUuid/inbox/$emailId', params: { emailId: 1, clientUuid: 1 } }} />

Did you find this page helpful?