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

[BernardA]

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>

Expected behavior

Expecting to work without the warning.
In fact it DOES work. Just trying to get rid of the warning

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: MacOS 10.15.6
• Browser (if applies) Chrome, Firefox
• Version of Next.js: 9.5.3
• Version of Node.js: 12.16.0

Additional context

The code is available in this repo

[gabrielalmeida]

Duplicate of #16794, it's fixed on next@9.5.4-canary.2.

[BernardA]

Thanks @gabrielalmeida
I will wait till 9.5.4 is released to upgrade and test. Leaving it open for now.

[jesseweed]

Confirmed this is resolved for me after upgrading to 9.5.5.

[BernardA]

Seems to be working fine. thanks

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.