Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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>