How to generate href for a given route in Tanstack router?

64 views Asked by At

I am using React Spectrum and need to use its Link component with TanStack React Router. As per Spectrum documentation, I should use a top provider and expose the function that will navigate to the given string/href route:

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

Now, I have a route defined for reset password:

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

In, one of my components, I need to generate this href that I can pass to <Link /> component like this:

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

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

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

TanStack router doesn't seem to have any API/hook that can help me construct this URL in a type-safe way. Is there any thing like following but typesafe way to get the URL:

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

There are 0 answers