T
TanStack•2y ago
equal-aqua

How to pass link props to a child component

Hi. I need to be able to pass link props to a child component to allow this child component to show a link component with props passed as props. How can I do it type safely ? Thanks for your help !
3 Replies
sensitive-blue
sensitive-blue•2y ago
We've got an open issue for this
GitHub
ToOptions doesnt't satisfy props. · Issue #1271 · TanStack/router
Describe the bug thing I need - a Component, that wraps , so I can add predefined styles to all of my links. To use "more advanced" paths with them, I found a Type - ToOptions (https://ta...
sensitive-blue
sensitive-blue•2y ago
Currently the only way to do this is to pass in all the generics needed to the LinkProps type. Like this: 
const AppNavigationLink = <
  TRouteTree extends AnyRoute = RegisteredRouter["routeTree"],
  TFrom extends RoutePaths<TRouteTree> | string = string,
  TTo extends string = "",
  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
  TMaskTo extends string = "",
>(props: {
  name: string;
  props: Omit<
    React.PropsWithoutRef<
      LinkProps<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
        Omit<React.ComponentPropsWithoutRef<"a">, "preload">
    >,
    "children" | "className" | "activeProps" | "inactiveProps"
  >;
}) => {
  const { name, props: linkProps } = props;
  return (
      <Link className='...' {...linkProps}>
        {name}
      </Link>
  );
};
const AppNavigationLink = <
  TRouteTree extends AnyRoute = RegisteredRouter["routeTree"],
  TFrom extends RoutePaths<TRouteTree> | string = string,
  TTo extends string = "",
  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
  TMaskTo extends string = "",
>(props: {
  name: string;
  props: Omit<
    React.PropsWithoutRef<
      LinkProps<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
        Omit<React.ComponentPropsWithoutRef<"a">, "preload">
    >,
    "children" | "className" | "activeProps" | "inactiveProps"
  >;
}) => {
  const { name, props: linkProps } = props;
  return (
      <Link className='...' {...linkProps}>
        {name}
      </Link>
  );
};
But we are working on making this better.
equal-aqua
equal-aquaOP•2y ago
Thank you very much ! Hope we can get something better soon. Thanks for your work !

Did you find this page helpful?