T
TanStack3mo ago
other-emerald

Custom link with material UI not longer working with RC

I get the message:
Type '{ children: string; to: "/privacy"; }' is not assignable to type 'LinkComponentReactProps<ForwardRefExoticComponent<Omit<MUILinkProps, "ref"> & RefAttributes<HTMLAnchorElement>>>'.
Property 'children' is incompatible with index signature.
Type 'string' is not assignable to type 'never'.ts(2322)
Type '{ children: string; to: "/privacy"; }' is not assignable to type 'LinkComponentReactProps<ForwardRefExoticComponent<Omit<MUILinkProps, "ref"> & RefAttributes<HTMLAnchorElement>>>'.
Property 'children' is incompatible with index signature.
Type 'string' is not assignable to type 'never'.ts(2322)
My custom Link
import { forwardRef } from 'react';

import type { LinkComponent } from '@tanstack/react-router';
import { createLink } from '@tanstack/react-router';

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

interface MUILinkProps extends LinkProps {
// Add any additional props you want to pass to the Link
}

const MUILinkComponent = forwardRef<HTMLAnchorElement, MUILinkProps>((props, ref) => <MuiLink ref={ref} {...props} />);

const CreatedLinkComponent = createLink(MUILinkComponent);

const Link: LinkComponent<typeof MUILinkComponent> = (props) => {
return <CreatedLinkComponent preload={'intent'} {...props} />;
};

export default Link;
import { forwardRef } from 'react';

import type { LinkComponent } from '@tanstack/react-router';
import { createLink } from '@tanstack/react-router';

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

interface MUILinkProps extends LinkProps {
// Add any additional props you want to pass to the Link
}

const MUILinkComponent = forwardRef<HTMLAnchorElement, MUILinkProps>((props, ref) => <MuiLink ref={ref} {...props} />);

const CreatedLinkComponent = createLink(MUILinkComponent);

const Link: LinkComponent<typeof MUILinkComponent> = (props) => {
return <CreatedLinkComponent preload={'intent'} {...props} />;
};

export default Link;
Usage:
<Link to="/privacy"> Privacy Policy</Link>.
<Link to="/privacy"> Privacy Policy</Link>.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?