Reuse type of <Link to=""

[Patrick-Ullrich]

When building a component that wraps around the Link, e.g. a <NavItem, one would need the typings for the to prop, but I haven't found a good way to get it yet.

Tried a couple of things, but I think this snippet explains the intend well.

type NavSubItemProps = {
  children: React.ReactNode;
  path: ComponentProps<typeof Link>['to'];
};

export const NavSubItem = ({ children, path }: NavSubItemProps) => {
  return <Link to={path}>{children}</Link>;
};

This however just gives me string | undefined.

I also have the typings file:

import { router } from '../src/routes';

declare module '@tanstack/react-router' {
  interface RegisterRouter {
    router: typeof router;
  }
}

Thoughts?

[Moshyfawn]

import { createRouteConfig } from '@tanstack/react-router'
import type { AllRouteInfo } from '@tanstack/react-router'

const routeConfig = createRouteConfig()

type RoutePaths = AllRouteInfo<typeof routeConfig>['routePaths']

type NavLinkProps = {
  to: RoutePaths
}

function NavLink({ to }: NavLinkProps) {}

[xxidbr9]

this is the best answer, thanks 🎉

[tatwater]

Big bummer, the package no longer exports either createRouteConfig or AllRouteInfo 😢

[ChetreNelson]

same createRouteCOnfig is not avilable

[xxidbr9]

updates for version "@tanstack/react-router": "^1.48.1"

import { RegisteredRouter, RoutePaths } from "@tanstack/react-router"
import { router } from "../routers"

declare module '@tanstack/react-router' {
  interface Register {
    // This infers the type of our router and registers it across your entire project
    router: typeof router
  }
}

type RoutePaths = RoutePaths<RegisteredRouter["routeTree"]>

[tannerlinsley]

Use the newly exported MakeLinkOptions<> type and replicate the function signature for the normal Link component. Tanner Linsley

…

On Dec 7, 2022 at 5:28 PM -0700, moshyfawn ***@***.***>, wrote: import { createRouteConfig } from ***@***.***/react-router' import type { AllRouteInfo } from ***@***.***/react-router' const routeConfig = createRouteConfig() type RoutePaths = AllRouteInfo<typeof routeConfig>['routePaths'] type NavLinkProps = { to: RoutePaths } function NavLink({ to }: NavLinkProps) {} — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[tatwater]

Unfortunately doesn't look like the package exports MakeLinkOptions anymore either? Is there a new/better way to do this?

[Patrick-Ullrich]

@Moshyfawn thanks! That does work 🎉

@tannerlinsley I am not quite sure if I am following, I tried using the MakeLinkOptions, but I am not quite sure what to pass where:

Signature:

MakeLinkOptions<TAllRouteInfo, '/', TTo>

const routeConfig = createRouteConfig()
MakeLinkOptions<typeof routeConfig, '/', ?>

Doesn't seem to be quite right, do you have an example? Once you do, I happily put something into a sandbox as an example under guides or some if you think there is a fitting place for it.

Maybe part of the Links guide?

[tannerlinsley]

https://stackblitz.com/edit/tanstack-router-wgspgi?file=src%2Fmain.tsx

[Patrick-Ullrich]

Awesome! Thanks

[MartinMlynek]

for v0.83 version worked for me this, you can add you own properties:

import { Link, LinkPropsOptions } from '@tanstack/react-router';
import { PropsWithChildren, FC } from 'react';


type MyLinkProps = {
	onClick?: () => void;
};

const NavLink: FC<PropsWithChildren<MyLinkProps & LinkPropsOptions>> = ({
	children,
	onClick,
	...linkProps
}) => {
	if (onClick) {
		return <button onClick={onClick}>{children}</button>;
	} else {
		return (
			<Link {...linkProps}>
				<button>{children}</button>
			</Link>
		);
	}
};

export default NavLink;

[gynekolog]

For now I use component type based on the LinkComponent:

interface LinkFn<TElement extends ElementType> {
  <
    TFrom extends RoutePaths<RegisteredRouter["routeTree"]> = "/",
    TTo extends string = "",
  >(
    props: ComponentProps<TElement> &
      Omit<MakeLinkOptions<TFrom, TTo>, "activeProps"> & {
        // Props that override the component's props when the link is active
        // Why Omit? Use only custom props in the activeProps, not the anchor props.
        activeProps?: Omit<Partial<ComponentProps<TElement>>, keyof AnchorHTMLAttributes<HTMLAnchorElement>>;
      } & RefAttributes<HTMLAnchorElement>,
  ): ReactNode;
  displayName?: string;
}

const RButton: LinkFn<typeof Button<"a">> = forwardRef(({ activeProps, children, ...rest }: any, ref) => {
  const linkProps = useLinkProps(rest);
  const isActive = (linkProps as any)?.["data-status"] === "active";
  const props = isActive ? { ...linkProps, ...activeProps } : linkProps;
  return (
    <Button ref={ref} {...props} as={"a"}>
      {children}
    </Button>
  );
});
RButton.displayName = "Router.Button";

https://stackblitz.com/edit/tanstack-router-dsnud7?file=src%2Fmain.tsx

[bodasooqa]

Works for me, thank you :)

[lecstor]

found #1271 so will stop editing this now..

seems we now have LinkComponent that handles this nicely.

import { Link as TsrLink, LinkComponent } from "@tanstack/react-router";

export const Link: LinkComponent<"a"> = (props) => <TsrLink {...props} />;

Edit..

I wanted to add more props for styling so went back and managed to update the "MakeLinkOptions" answer provided by Tanner Linsley above (#429 (reply in thread))

It does only appear to be link-specific props that are included though, so children, style, and probably others still need to be added.

Also, Link from the router seems to be ok with absolute urls, but my wrapper has lost that and complains.

import { Link as TsrLink, LinkOptions, RegisteredRouter } from "@tanstack/react-router";

type ExtraProps = {
  size?: "sm" | "md" | "lg";
  children: ReactNode;
};

type RT = RegisteredRouter["routeTree"];

export const Link = <TTo extends string = ".">({
  size,
  ...props
}: LinkOptions<RT, "/", TTo> & ExtraProps) => (
  <TsrLink
    {...sxp(sx.base, size && sx[size])}
    {...props}
    activeProps={{
      className: "font-bold",
    }}
  />
);

[JakeHedman]

Either one of these seems to work. Second one is less verbose at the function definition but has an as any which might freak some people out :)

import {
  Link,
  LinkProps,
  RegisteredRouter,
  RoutePaths as RP,
} from "@tanstack/react-router";

type RT = RegisteredRouter["routeTree"];
type MyLinkProps<
  F extends RP<RT> | string,
  T extends string,
  MF extends RP<RT> | string,
  MT extends string,
> = LinkProps<RT, F, T, MF, MT> &
  React.PropsWithoutRef<Omit<React.HTMLProps<"a">, "children" | "preload">> &
  React.RefAttributes<React.ComponentRef<"a">>;

export function LinkWithCustomProp<
  F extends RP<RT> | string = string,
  T extends string = "",
  MF extends RP<RT> | string = F,
  MT extends string = "",
>(props: MyLinkProps<F, T, MF, MT> & { myCustomProp: string }) {
  const { myCustomProp, ...linkProps } = props;

  return <Link {...(linkProps as MyLinkProps<F,T,MF,MT>)}>my custom prop is: {myCustomProp}</Link>;
}

type MyLinkComponent<CustomProps> = <
  F extends RP<RT> | string = string,
  T extends string = "",
  MF extends RP<RT> | string = F,
  MT extends string = "",
>(
  props: MyLinkProps<F, T, MF, MT> & CustomProps,
) => React.ReactElement;

export const AlsoLinkWithCustomProp: MyLinkComponent<{ myCustomProp: string }> =
  function AlsoLinkWithCustomProp(props) {
    const { myCustomProp, ...linkProps } = props;
    return (
      <Link {...(linkProps as any)}>my custom prop is: {myCustomProp}</Link>
    );
  };