T
TanStack•3y ago
quickest-silver

Link wrapper requires params

I am using a wrapper around Link from Mantine called NavLink. 
<NavLink component={Link} to={myroute.to} />
<NavLink component={Link} to={myroute.to} />
typescript complains that it is missing the params property... 
Property 'params' is missing in type '{ component: LinkComponent<{}>; to: "/route1"; }' but required in type 'Omit<Omit<{ to?: any; hash?: true | Updater<string> | undefined; state?: true | NonNullableUpdater<LocationState> | undefined; from?: any; } & ... 8 more ... & RefAttributes<...>, "ref">, "component" | keyof NavLinkProps>'
Property 'params' is missing in type '{ component: LinkComponent<{}>; to: "/route1"; }' but required in type 'Omit<Omit<{ to?: any; hash?: true | Updater<string> | undefined; state?: true | NonNullableUpdater<LocationState> | undefined; from?: any; } & ... 8 more ... & RefAttributes<...>, "ref">, "component" | keyof NavLinkProps>'
where plain old <Link to={myroute.to} /> works fine. Is there a suggested pattern to avoid this typescript error?
2 Replies
quickest-silver
quickest-silverOP•3y ago
Seems related to this: https://github.com/mantinedev/mantine/issues/4134
GitHub
Polymorphic components don't work with Tanstack Router · Issue #413...
What package has an issue @mantine/core Describe the bug So I was using the Tanstack Router and I tried using the polymorphic components and that throws some sort of error. I think it has something...
quickest-silver
quickest-silverOP•3y ago
so as a workaround, i'm not using <NavLink component={Link}, but rather just using NavLink and useNavigate and doing the navigate by hand onClick... :/ or this slightly less bad solution... 
import { NavLink, NavLinkProps } from "@mantine/core";
import { Link, MakeLinkOptions, useMatches } from "@tanstack/react-router";

export const NavLinkAsLink = (props: NavLinkProps & MakeLinkOptions) => {
  const matches = useMatches();
  const routeId = matches[matches.length - 1]?.routeId;
  return (
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    <NavLink {...(props as any)} component={Link} active={props.to === routeId} />
  );
};
import { NavLink, NavLinkProps } from "@mantine/core";
import { Link, MakeLinkOptions, useMatches } from "@tanstack/react-router";

export const NavLinkAsLink = (props: NavLinkProps & MakeLinkOptions) => {
  const matches = useMatches();
  const routeId = matches[matches.length - 1]?.routeId;
  return (
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    <NavLink {...(props as any)} component={Link} active={props.to === routeId} />
  );
};

Did you find this page helpful?