Meaning of React LinkProps

user_19868150 0
Viewed 36

I think LinkProps is a type of props, but I don't know what it means to specify Omit<RouterLinkProps, 'to'>. Please tell me.

import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
import { LinkProps } from '@mui/material/Link';

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

Reference site:.https://mui.com/material-ui/guides/routing/

react-router material-ui reactjs
1 Answers

Omit<RouterLinkProps, 'to'> is simply removing the to prop from the react-router-dom Link component's props type definition. See Omitting Keys for further details.

LinkProps

export interface LinkProps
  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
  reloadDocument?: boolean;
  replace?: boolean;
  state?: any;
  to: To; // <-- removes this prop
}

The rest of the type is effectively moving the to prop to an href prop.

Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }

Which should result in a type as follows:

export interface LinkProps
  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
  reloadDocument?: boolean;
  replace?: boolean;
  state?: any;
  href: To;
}
user_86908570
Related