Invalid href passed to router error after fresh installed create-next-app

问题

After installed nextjs app on my local machine using create-next-app I get this error in console Invalid href passed to router.

Does anyone know how to solve it?

I try to use to attribute instead of href attribute in Link component's but it doesn't help.

回答1:

Removing the protocol http or https from the external url fixes this issue

example https://stackoverflow.com/ should be //stackoverflow.com/

回答2:

You have to set parameter prefetch={false}

<Link key={index} href={value} prefetch={false}>
                <a target={"_blank"}>
                    {icon}
                </a>
            </Link>

回答3:

"External URLs, and any links that don't require a route navigation using /pages, don't need to be handled with Link; use the anchor tag for such cases instead."

Given in the docs: https://nextjs.org/docs/api-reference/next/link

回答4:

The problem was nextjs doesn't work with external links that's why console throw's error.

When I remove all external link's and instead add internal link's everything worked fine.

回答5:

Yes, nextjs throws that error. Don't use the component at all if linking to an external source, for external links you can use tag. In your case we can conditionally render either a plain anchor tag or use the link component if the prop matches an internal route. For example:

Link.indexOf('http') == 0 ? return(<a href={prop}>regular link</a>) : return(<Link>...</Link>)

来源：https://stackoverflow.com/questions/57841607/invalid-href-passed-to-router-error-after-fresh-installed-create-next-app

标签

reactjs

next.js