reactjs - Hvordan opretter man typesikre links med ruteparametre med TanStack/Router og MUI?

Jeg forsøger at bruge tanstack-router med MUI Link-komponenten.

Når jeg prøver at bruge MUI-komponenten med en rute, der accepterer en parameter, får jeg en compile-fejl om Type '{ itemId: string; }' is not assignable to type 'Omit<never, never>'.

Hvordan kan jeg strukturere min kode, så TypeScript forstår parametrene for ruten?

Bemærk, at MUI-linket ser ud til at fungere korrekt, det typekontrolleres bare ikke.

Målruten, jeg prøver at linke til, ser sådan ud:

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

Jeg kan linke til ruten med TanStack Link, og typekontrollen fungerer fint, men det oprettede link er ikke integreret med MUI (styling, funktionalitet osv.):

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

Når jeg prøver at bruge MUI Link, sådan her:

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

Jeg får en kompilationsfejl:

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

Efter MUI-sektionen om routing har jeg tilpasset temaet for at integrere MUI med router:

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,
      },
    },
...

Repositoriet for projektet, inklusive opsætning af routeren: https://github.com/shorn/tater/blob/d8d6cc82d7079b820e8fc2d8be6015626683162a/src/App.tsx#L42

Versioner :

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

Relaterede artikler