Next.js: Link with react-material-ui - warning Unknown key passed via urlObject into url.format:

Created on 24 Sep 2020 · 4Comments · Source: vercel/next.js

Bug report

This may be related to this issue.

I am getting the warning below on all my Link instances:

     Unknown key passed via urlObject into url.format: searchParams

Describe the bug

I've tried 2 alternatives to using Link:
1 - using the recommended implementation from react-material-ui

2 - using the solution proposed in this article

To Reproduce

For alternative 1 I have /src/components/link like so:

 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import NextLink from 'next/link';
 import MuiLink from '@material-ui/core/Link';

const NextComposed = React.forwardRef(function NextComposed(props, ref) {
     const { as, href, ...other } = props;

return (
    <NextLink href={href} as={as}>
        <a ref={ref} {...other} />
    </NextLink>
 );
 });

NextComposed.propTypes = {
    as: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    href: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   prefetch: PropTypes.bool,
};

function Link(props) {
   const {
    href,
    activeClassName = 'active',
    className: classNameProps,
    innerRef,
    naked,
    ...other
} = props;

const router = useRouter();
const pathname = typeof href === 'string' ? href : href.pathname;
const className = clsx(classNameProps, {
    [activeClassName]: router.pathname === pathname && activeClassName,
});

if (naked) {
    return (
        <NextComposed className={className} ref={innerRef} href={href} {...other} />
    );
}

return (
    <MuiLink
        component={NextComposed}
        className={className}
        ref={innerRef}
        href={href}
        {...other}
    />
);
}

Link.propTypes = {
 ....
};

 export default React.forwardRef((props, ref) => <Link {...props} innerRef={ref} />);

Then on the component:

  import Link from './link';
 import { EditOutlined } from '@material-ui/icons';
 .....

 <Link
     href="/admin/categories/edit/[adId]"
     as={`/admin/categories/edit/${
              tableMeta.rowData[0].match(/\d+/)[0]
            }`}
      >
          <EditOutlined id={tableMeta.rowData[0]} />
  </Link>

For alternative 2

   import Link from 'next/link';
   import { EditOutlined } from '@material-ui/icons';
   .....
   <Link
       href="/admin/categories/edit/[adId]"
      as={`/admin/categories/edit/${
            tableMeta.rowData[0].match(/\d+/)[0]
            }`}
       passHref
   >
      <Button component="a">
           <EditOutlined id={tableMeta.rowData[0]} />
       </Button>
  </Link>