I am trying to use tanstack-router with the MUI Link component.

我正在尝试使用具有MUI链路组件的tanstack-router。

When I try to use the MUI component with a route that accepts a parameter, I get a compile error about Type '{ itemId: string; }' is not assignable to type 'Omit<never, never>'.

当我尝试将MUI组件与接受参数的路由一起使用时，我收到一个编译错误，说明类型‘{itemid：string；}’不可赋值为类型‘omit ’。

How can I structure my code so that TypeScript understands the parameters for the route?

我如何组织我的代码，以便让打字脚本理解路线的参数？

Note that the MUI Link appears to function correctly, it just doesn't type-check.

请注意，MUI链接似乎工作正常，只是没有进行类型检查。

The target route I'm trying to link to looks like:

我尝试链接的目标路线如下所示：

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>
  </>
}

I can link to the route with the TanStack Link and the type checking works fine, but the created link is not integrated with MUI (styling, functionality, etc.):

我可以使用TanStack链接链接到该路线，类型检查工作正常，但创建的链接没有与MUI集成(样式、功能等)：

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

When I try to use the MUI Link, like this:

当我尝试使用MUI链接时，如下所示：

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

I get a 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

Following the MUI section on routing, I've customised the theme to integrate MUI with router:

遵循关于路由的MUI部分，我定制了主题以将MUI与路由器集成：

export const LinkBehavior = React.forwardRef<
  HTMLAnchorElement,
  Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }
>((props, ref) => {
  const { href, ...other } = props;
  // Map href (Material UI) -> to (react-router)
  return <RouterLink ref={ref} to={href} {...other} />;
});

const muiLightTheme = createTheme({

  components: {

    MuiLink: {
      defaultProps: {
        component: LinkBehavior,
      } as RouterLinkProps,
    },
    MuiButtonBase: {
      // should be something like `as RouteButtonProps`?
      defaultProps: {
        LinkComponent: LinkBehavior,
      },
    },
...

The repo for the project, including setup of the router: https://github.com/shorn/tater/blob/d8d6cc82d7079b820e8fc2d8be6015626683162a/src/App.tsx#L42

该项目的repo，包括路由器的设置：https://github.com/shorn/tater/blob/d8d6cc82d7079b820e8fc2d8be6015626683162a/src/App.tsx#L42

Versions:

版本：

"@mui/material": "5.14.7",
"@tanstack/react-router" : "0.0.1-beta.185"