How can I use MUI Link component with parameters?

[shorn]

Route definition:

export const itemViewRoute = new Route({
  getParentRoute: () => rootRoute,
  path: 'item/$itemId/view',
  component: ViewItem
});

export function ViewItem(){
  const params = useParams({from: itemViewRoute.id})
  return <>
    <SmallContentMain>
      <ContainerCard title={`View Item ${params.itemId}`}>
        <TextSpan>Description: "description of {params.itemId}"</TextSpan>
      </ContainerCard>

    </SmallContentMain>
  </>
}

Working link using Router's component:

<ListItem>
  <RouterLink to={itemViewRoute.to}
    params={{itemId: "42"}} search={{}}
  >
    View Item 42 (RouterLink)
  </RouterLink>
</ListItem>

Working (but failing to type-check) link using MUI component:

<ListItem>
  <MuiLink component={RouterLink}
    to={itemViewRoute.to}
    preload={'intent'}
    search={{}} params={{itemId: '42'}}
  >
    View Item 42 (MuiLink)
  </MuiLink>
</ListItem>

Compile error:

src/Route/Home.tsx:35:13 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: { component: LinkComponent<{}>; } & Omit<TypographyOwnProps, "children" | "classes" | "color" | "variant"> & { children?: ReactNode; ... 5 more .
..; variant?: OverridableStringUnion<...> | undefined; } & CommonProps & Omit<...>): Element | null', gave the following error.
    Type '{ itemId: string; }' is not assignable to type 'ParamsReducer<{ itemId?: string | undefined; } & Record<never, string> & Record<"itemId", string>, { itemId?: strin
g | undefined; } & Partial<{}> & Omit<never, never> & Partial<...> & Partial<...>>'.
      Type '{ itemId: string; }' is not assignable to type '{ itemId?: string | undefined; } & Partial<{}> & Omit<never, never> & Partial<Record<never, string>> & Partial<Re
cord<never, string> & Record<...>>'.
        Type '{ itemId: string; }' is not assignable to type 'Omit<never, never>'.
          Property 'itemId' is incompatible with index signature.
            Type 'string' is not assignable to type 'never'.
  Overload 2 of 2, '(props: DefaultComponentProps<LinkTypeMap<{}, "a">>): Element | null', gave the following error.
    Type '{ children: string; component: LinkComponent<{}>; to: "/item/$itemId/view"; preload: string; search: {}; params: { itemId: string; }; }' is not assignable to type 
'IntrinsicAttributes & Omit<TypographyOwnProps, "children" | "classes" | "color" | "variant"> & { children?: ReactNode; ... 5 more ...; variant?: OverridableStringUnion<...>
 | undefined; } & CommonProps & Omit<...>'.
      Property 'component' does not exist on type 'IntrinsicAttributes & Omit<TypographyOwnProps, "children" | "classes" | "color" | "variant"> & { children?: ReactNode; ...
 5 more ...; variant?: OverridableStringUnion<...> | undefined; } & CommonProps & Omit<...>'.

 35             <MuiLink component={RouterLink}
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 36               to={itemViewRoute.to}
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
... 
 38               search={{}} params={{itemId: '42'}}
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 39             >
    ~~~~~~~~~~~~~

  node_modules/@tanstack/router-core/build/types/link.d.ts:61:5
    61     params: ParamsReducer<TFromFullParams, TToFullParams>;
           ~~~~~~
    The expected type comes from property 'params' which is declared here on type 'IntrinsicAttributes & { component: LinkComponent<{}>; } & Omit<TypographyOwnProps, "childr
en" | "classes" | "color" | "variant"> & { ...; } & CommonProps & Omit<...>'


Found 1 error in src/Route/Home.tsx:35


Process finished with exit code 2

StackOverflow question with more detail: https://stackoverflow.com/q/77074670/924597
GitHub repo: https://github.com/shorn/tater/blob/d8d6cc82d7079b820e8fc2d8be6015626683162a/src/Route/Home.tsx#L35

[shanu-mol]

import Link, { LinkProps } from '@mui/material/Link';

import { AnyRoute, MakeLinkOptions, RegisteredRouter, Link as RouterLink } from '@tanstack/react-router';

type LinkRouterProps<TRouteTree extends AnyRoute = RegisteredRouter['routeTree'], TTo extends string = ''> =
MakeLinkOptions<TRouteTree, '/', TTo> & LinkProps;

export default function LinkRouter<TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],TTo extends string = ''>
(props:LinkRouterProps<TRouteTree, TTo>) {
  return <Link {...props} component={RouterLink as any} />;
}

//Usage
<LinkRouter underline="hover" activeOptions={{ exact: true }} to={"/MyProfile"} sx={{ color: 'primary.contrastText' }}>
  My Profile
</LinkRouter>

[ruiaraujo012]

I can share the code here next Monday if you want. I'm currently on a small vacation.

[nathan-isaac]

Thanks, that would be great. Enjoy your vacation.

[ruiaraujo012]

Hello @nathan-isaac.

I don't have the active state on the custom RouterButton, but, I'm using it to highlight a ListItem. Although you can use the same logic to highlight the button. Here it is:

  const matchRoute = useMatchRoute();

  const match = useCallback(
    (path?: string) => {
      if (!path) {
        return false;
      }

      return Boolean(matchRoute({ to: path }));
    },
    [matchRoute],
  );

[nathan-isaac]

Thanks!

[ruiaraujo012]

You're welcome. I hope that it could help.

[KiwiKilian]

Had a similar problem with Button from @mui/joy, I adapted your solution @shanu-mol:

import { Link, LinkOptions, RegisteredRouter } from '@tanstack/react-router';
import { Button, ButtonProps } from '@mui/joy';

type ButtonLinkProps<TTo extends string = ''> = LinkOptions<RegisteredRouter['routeTree'], '/', TTo> & ButtonProps;

export function ButtonLink<TTo extends string = ''>(props: ButtonLinkProps<TTo>) {
  return <Button component={Link} {...props} />;
}

[ruiaraujo012]

Any example with forwardRef?

[shanu-mol]

import { forwardRef } from 'react';
import Link, { type LinkProps } from '@mui/material/Link';

import { type AnyRoute, type LinkOptions, type RegisteredRouter, Link as RouterLink } from '@tanstack/react-router';

type LinkRouterProps<TRouteTree extends AnyRoute = RegisteredRouter['routeTree'], TTo extends string = ''> =
MakeLinkOptions<TRouteTree, '/', TTo> & LinkProps;

const LinkRouter = forwardRef(function <
  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
  TTo extends string = '',
>(props: LinkRouterProps<TRouteTree, TTo>, ref: React.ForwardedRef<HTMLAnchorElement>) {
  return <Link {...props} ref={ref} component={RouterLink} />;
});

export default LinkRouter;

[ruiaraujo012]

Thank you, I'm using createLink now.

[laurentDellaNegra]

@ruiaraujo012 do you have an example pls ?

[ruiaraujo012]

Yes, it's here

[NehrDani]

Funny enough it seems it suffices just to wrap the component in createLink

import {Button} from "@mui/material"
import { createLink } from "@tanstack/react-router"

const RouterButton = createLink(Button)

[laurentDellaNegra]

Funny enough it seems it suffices just to wrap the component in createLink

import {Button} from "@mui/material"

import { createLink } from "@tanstack/react-router"



const RouterButton = createLink(Button)

Yes this is the way

[matt-erhart]

This is the way indeed

[ruiaraujo012]

Oh nice, last time I tried it didn't work.

[itshallrun]

is this documented somewhere?