我在Firefox上的Next.js默认路由器遇到一个奇怪的问题。每次我在Firefox上更改路由时,都会向标头random_logo.png
中的图像发出网络请求,导致图像弹出。在Chrome或Safari中不会发生这种情况。这是错误还是预期的行为?
我制作了两个视频,展示了Chrome的预期行为与Firefox的意外行为。
Firefox(意外):https://s3.amazonaws.com/www.dbxd.com/next-router-firefox-incorrect.mov
Chrome浏览器(预期):https://s3.amazonaws.com/www.dbxd.com/next-router-chrome-correct.mov
Github存储库:https://github.com/joelhoelting/next-firefox-issue
布局组件:layout.js
import Header from '../includes/header';
export default ({ children }) => (
<div className="container">
<Header />
{children}
</div>
);
标题部分:header.js
import Link from 'next/link';
export default () => {
console.log('header is re-rendering');
return (
<header>
<Link href='/'>
<img className='logo' src='/static/images/logos/random_logo.png' alt='Random Logo Text' />
</Link>
<ul className='desktopNavigation'>
<li><Link href='/About'><a>About</a></Link></li>
<li><Link href='/Contact'><a>Contact</a></Link></li>
<li><Link href='/News'><a>News</a></Link></li>
</ul>
</header>
);
};