reactjs - Bagaimana untuk menjana href untuk laluan yang diberikan dalam Tanstack router?

Saya sedang menggunakan React Spectrum dan perlu menggunakan komponen Link dengan TanStack React Router. Mengikut dokumentasi Spectrum, saya harus menggunakan pembekal atas dan mendedahkan fungsi yang akan menavigasi ke laluan string/href yang diberikan:

import { Provider, defaultTheme } from '@adobe/react-spectrum';
import { useNavigate } from '@tanstack/react-router';

export function App(props: AppProps) {
  const { children } = props;
  const navigateFn = useNavigate();

  const navigate = (to: string) => {
    navigateFn({ to });
  };

  return (
    <Provider theme={defaultTheme} router={{ navigate }}>
      {children}
    </Provider>
  );
}

Sekarang, saya telah menetapkan laluan untuk menetapkan semula kata laluan:

export const resetRoute = createRoute({
  getParentRoute: () => authRoute,
  path: '/reset-password/$resetToken',
  component: Reset,
});

Dalam salah satu komponen saya, saya perlu menjana href ini yang boleh saya serahkan kepada komponen <Link /> seperti ini:

import { Link } from '@adobe/react-spectrum';

// ????
const resetHref = `/how/to/generate/href/for/resetRoute/using/tanstack/api`;

return (
  <Link href={resetHref} />
);

Router TanStack nampaknya tidak mempunyai sebarang API/hook yang boleh membantu saya membina URL ini dengan cara yang selamat dari segi jenis. Adakah terdapat sesuatu seperti berikut tetapi cara yang selamat dari segi jenis untuk mendapatkan URL:

const href: string = useHrefForRoute({
  to: resetRoute,
  
  // Type error if invalid parameters are passed
  params: {
    resetToken: '1234',
  },
});

Jawapan #1

Anda boleh menggunakan useLinkProps (https://tanstack.com/router/latest/docs/framework/react/api/router/useLinkPropsHook).

Seperti ini:

const {href} = useLinkProps({
  to: Route.fullPath,
})