reactjs - Cara membungkus tanstack/router Link dengan komponen lain sambil mengekalkan keselamatan jenis

Saya ingin membungkus komponen Link dari Tanstack Router dengan komponen lain dan dapat menghantar props yang diperlukan kepada komponen ini agar dapat dihantar kepada komponen Link.

Iaitu. Saya ingin membuat komponen boleh guna semula yang menggunakan dan membalut butang luaran dengan Tanstack Router Link

Sesuatu seperti ini

import { Link, LinkOptions } from '@tanstack/router'

interface ButtonLinkProps {
  // how do I make this type safe, it results to `string | undefined` instead of valid routes I have defined
  to: LinkOptions['to']
  children: string
}

export function ButtonLink(props: ButtonLinkProps) {
  return (
    <Link to={props.to} params={{}} search={{}}>
      <Button component='span'>{props.children}</Button>
    </Link>
  )
}

Apabila menggunakan komponen Link secara langsung, nilai yang diberikan kepada prop to hanya boleh salah satu daripada laluan yang telah ditetapkan. Walau bagaimanapun, saya tidak pasti bagaimana untuk menentukan prop to dalam komponen yang saya sendiri tentukan untuk mencapai hasil yang sama.

// How do I achieve the same type safety I would get if I would use Link directly
<ButtonLink to='/'>Link</ButtonLink>

Jawapan #1

Menemui penyelesaian berikut yang berkesan untuk saya pada versi 0.0.1-beta.104, dengan anggapan komponen ButtonLink saya dalam OP:

interface ButtonLinkProps {
  to: MakeLinkOptions['to']
  children: string
}

atau jika kita hanya mahu semua props yang boleh diberikan kepada Link

interface ButtonLinkProps extends MakeLinkOptions {
  children: string
}

Jawapan #2

Ini adalah contoh bagaimana ia boleh digunakan dengan "@tanstack/react-router": "^1.2.2"

import { AnyRoute, Link, LinkProps, RegisteredRouter, RoutePaths } from "@tanstack/react-router";
import { ReactNode } from "react";

export function CustomLink<
  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
  TFrom extends RoutePaths<TRouteTree> | string = string,
  TTo extends string = '',
  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom, TMaskTo extends string = ''
>({
  linkProps,
  children,
}: {
  linkProps: LinkProps<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> & React.RefAttributes<HTMLAnchorElement>
  children: ReactNode
}) {
  return <Link {...linkProps}>{children}</Link>
}

Kemudian, ia boleh digunakan seperti

function Main() {
  return (
    <CustomLink linkProps={{ to: "/$param", params: { foo: "foo" } }}>
      Click here
    </CustomLink>
  )
}

P.S. Sejujurnya, saya tidak tahu apa maksud semua jenis ini, tetapi ia dicadangkan di saluran Discord React-Router.

Jawapan ini juga diduplikasi di sini.