reactjs - ¿Cómo generar un href para una ruta dada en Tanstack router?
Estoy usando React Spectrum y necesito usar su componente Link con TanStack React Router. Según la documentación de Spectrum, debo usar un proveedor superior y exponer la función que navegará a la ruta dada como cadena/href:
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>
);
}
Ahora, tengo una ruta definida para restablecer la contraseña:
export const resetRoute = createRoute({
getParentRoute: () => authRoute,
path: '/reset-password/$resetToken',
component: Reset,
});
En uno de mis componentes, necesito generar este href que puedo pasar al componente <Link /> así:
import { Link } from '@adobe/react-spectrum';
// ????
const resetHref = `/how/to/generate/href/for/resetRoute/using/tanstack/api`;
return (
<Link href={resetHref} />
);
Parece que el enrutador TanStack no tiene ninguna API/hook que pueda ayudarme a construir esta URL de manera segura en cuanto a tipos. ¿Existe algo como lo siguiente pero de manera segura en cuanto a tipos para obtener la URL:
const href: string = useHrefForRoute({
to: resetRoute,
// Type error if invalid parameters are passed
params: {
resetToken: '1234',
},
});
Respuesta #1
Puedes usar useLinkProps (https://tanstack.com/router/latest/docs/framework/react/api/router/useLinkPropsHook).
Así:
const {href} = useLinkProps({
to: Route.fullPath,
})
