next.js: Cancel Rendering Route Error when Router Push hash

I’m using this workaround

router
  .replace( // or push or whatever you want
    {
      pathname: window.location.pathname,
      hash: newHash,
      query: window.location.search,
    },
    null,
    {
      shallow: true,
    }
  )
  .catch((e) => {
    // workaround for https://github.com/vercel/next.js/issues/37362
    if (!e.cancelled) {
      throw e
    }
  })

Any updates for this?

I’m going to use the following until there is a fix

import { useRouter } from 'next/router';

const router = useRouter();
const pathAndSlug= router.asPath.split('#')[0];
const newPath = `${pathAndSlug}#${hash}`;
  
window.location.replace(newPath);

Having the same error just by clicking quickly on nav links with hashtag hrefs. Seems that the error is triggered when the hash link is clicked before it fully scrolled up/down to the hash clicked before.

React 18.1 / Next 12.1.6

Adding router.isReady check worked for me:

  const router = useRouter();

  React.useEffect(() => {
    if (router.isReady) {
      router.replace(
        {
          hash: newHash,
        },
        null,
        {
          shallow: true,
        },
      );
    }
  }, [router]);

Also wondering if there’s a solution to this yet.

A standard accessibility practice is to have a link to the main tag of a page at the very top of a page’s body so that screen reader users can use it to skip over hearing the navigation sections at the beginning of a page over-and-over again. I’m having trouble doing that because of this issue.

I’ve given my main tag an id of “main” and am attempting to use the router to push the current page to it, and am getting the same error.

I’m getting this error with the following code:

       router.push(
            {
                pathname: '/',
                hash: 'hash',
            },
            undefined,
            { shallow: true }
        );

The hash bit seems to be the offender. Removing it removes the error.

If I switch from hash to query params, there is no error:

      router.push(
            {
                pathname: '/',
                query: { section: "section" },
            },
            undefined,
            { shallow: true }
       );

Versions: “react”: “18.2.0”, “next”: “12.2.5”,

any solution to this yet ? It comes after I upgraded react to 18 either with next version 12 or 13 error is appearing… there is no hash routing in my app and it is only happening for dynamic routes.