Custom link with material UI not longer working with RC
I get the message:
My custom Link
Usage:
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)
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;
<Link to="/privacy"> Privacy Policy</Link>.
<Link to="/privacy"> Privacy Policy</Link>.
0 Replies