reactjs - Hvordan genererer man href for en given rute i Tanstack-router?

Jeg bruger React Spectrum og har brug for at bruge dens Link-komponent med TanStack React Router. Ifølge Spectrum-dokumentationen bør jeg bruge en top provider og eksponere funktionen, der vil navigere til den givne streng/href-rute:

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>
  );
}

Nu har jeg en rute defineret til nulstilling af adgangskode:

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

I en af mine komponenter skal jeg generere dette href, som jeg kan give videre til <Link />-komponenten på denne måde:

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

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

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

Det ser ikke ud til, at TanStack-routeren har nogen API/hook, der kan hjælpe mig med at konstruere denne URL på en typesikker måde. Findes der noget som følgende, men typesikkert, til at få URL'en:

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

Svar #1

Du kan bruge useLinkProps (https://tanstack.com/router/latest/docs/framework/react/api/router/useLinkPropsHook).

Sådan her:

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