错误：路线未在 Next.js 上完成加载

Question

我正在尝试为我的个人博客构建一个简单的路线，但是当我从索引页面Error: Route did not complete loading: /contact单击我的路线时，chrome 开发人员工具会引发错误。/contact当我点击博客上的另一条路线时也会发生这种情况，反之亦然。在开发模式下，这有点烦人，每次我更改代码并导航到我的路线时，我的 Chrome 开发人员工具总是会引发此错误。我非常确定我的代码遵循 next.js 官方文档上的所有说明。这是我的代码，我使用 styled-components 来设置我的组件的样式。

const Navbar = () => {
    const router = useRouter();
    return (
        <NavbarItems>
            <div className="container">
                <span className="nav-logo">
                    <Link href="/">
                        <a>MKL.</a>
                    </Link>
                </span>
                <ul className="link-container">
                    <li className="nav-link">
                        <Link href="/">
                            <a className={router.pathname === '/' ? 'active' : ''}>Home</a>
                        </Link>
                    </li>
                    <li className="nav-link">
                        <Link href="/about">
                            <a className={router.pathname === '/about' ? 'active' : ''}>
                                About
                            </a>
                        </Link>
                    </li>
                    <li className="nav-link">
                        <Link href="/contact">
                            <a className={router.pathname === '/contact' ? 'active' : ''}>
                                Contact
                            </a>
                        </Link>
                    </li>
                </ul>
            </div>
        </NavbarItems>
    );
};

在弄清楚之后，我还注意到，当我打开 chrome 开发人员工具并单击其路线之一几次时，官方 next.js 网站也出现了此错误。

如何防止我的项目出现此错误以及为什么 next.js Web 也出现此错误？我在 Windows 10 上使用 next.js v10.0.6、node v14.15.3 和 chrome v88.0.4324.104。这个错误在我的开发和生产中都会发生。