Error: Route did not complete loading on Next.js

Viewed 1270

I am trying to build a simple route for my personal blog but the chrome developer tools raise an error saying that Error: Route did not complete loading: /contact when I click my /contact routes from the index page. It also happens when I click another route on my blog vice versa. It's kinda annoying when in development mode, my chrome developer tools always raise this error every time I changed my code and navigate to my routes. I am pretty sure that my code follows all the instructions on next.js official documentation. Here is my code, I am using styled-components for styling my component.

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>
    );
};

my project

After figuring out I also notice that the official next.js web also had this error when I open chrome developer tools and click one of its routes a couple of times. next.js official documentation

How to prevent this error on my project and why the next.js web also has this error? I am using next.js v10.0.6, node v14.15.3, and chrome v88.0.4324.104 on windows 10. This error happen both on my development and production.

0 Answers
Related