Link `to` prefix helper and typescript

My application supports a single to have access to multiple teams. Almost all links in the application will be links to the same

/team/$slug

/team/$slug

prefix. I am trying to build a Link helper but I am struggling in navigating the types to play nice with my component. Any direction would be appreciated.

Example component:

import { Link, LinkComponentProps } from "@tanstack/react-router";
import { useTeam } from "~/hooks/use-team";

export const TeamLink: React.FC<
  LinkComponentProps<"a"> & {
    params: Record<string, unknown>;
  }
> = ({ to, params, ...props }) => {
  const { team } = useTeam();
  return (
    <Link
      to={`/team/$teamSlug${to}`}
      params={{ ...params, teamSlug: team.slug }}
      {...props}
    >
      {props.children}
    </Link>
  );
};

import { Link, LinkComponentProps } from "@tanstack/react-router";
import { useTeam } from "~/hooks/use-team";

export const TeamLink: React.FC<
  LinkComponentProps<"a"> & {
    params: Record<string, unknown>;
  }
> = ({ to, params, ...props }) => {
  const { team } = useTeam();
  return (
    <Link
      to={`/team/$teamSlug${to}`}
      params={{ ...params, teamSlug: team.slug }}
      {...props}
    >
      {props.children}
    </Link>
  );
};

TanStack•14mo ago•

8 replies

dangerous-fuchsia

Link `to` prefix helper and typescript

My application supports a single to have access to multiple teams. Almost all links in the application will be links to the same

/team/$slug

/team/$slug

prefix. I am trying to build a Link helper but I am struggling in navigating the types to play nice with my component. Any direction would be appreciated.

Example component:

import { Link, LinkComponentProps } from "@tanstack/react-router";
import { useTeam } from "~/hooks/use-team";

export const TeamLink: React.FC<
  LinkComponentProps<"a"> & {
    params: Record<string, unknown>;
  }
> = ({ to, params, ...props }) => {
  const { team } = useTeam();
  return (
    <Link
      to={`/team/$teamSlug${to}`}
      params={{ ...params, teamSlug: team.slug }}
      {...props}
    >
      {props.children}
    </Link>
  );
};

import { Link, LinkComponentProps } from "@tanstack/react-router";
import { useTeam } from "~/hooks/use-team";

export const TeamLink: React.FC<
  LinkComponentProps<"a"> & {
    params: Record<string, unknown>;
  }
> = ({ to, params, ...props }) => {
  const { team } = useTeam();
  return (
    <Link
      to={`/team/$teamSlug${to}`}
      params={{ ...params, teamSlug: team.slug }}
      {...props}
    >
      {props.children}
    </Link>
  );
};

Link `to` prefix helper and typescript

Similar Threads

Link `to` prefix helper and typescript

Similar Threads

Similar Threads

Similar Threads