为什么它重载页面时使用链接Next.js?

Question

我使用next的Link组件来重定向到其他页面，但是当我点击它时，根据next的文档，它完全重新加载页面，如下所示

<Link href='/rute'>
<a>Contenido</a>
</Link>

我有路径和数组中的内容来遍历它

export const Navheader = [
{
id: 1,
title: 'home',
link: '/',
},
{
id: 2,
title: 'laptops',
link: '/detailPage',
},
{
id: 3,
title: 'delivery',
link: '/deliveryPage',
},
{
id: 4,
title: 'legal active',
link: '/legalPage',
},
{
id: 5,
title: 'secure payment',
link: '/paymentPage',
},

];

一个带有数组道具的组件

import PropTypes from 'prop-types';
import { useRouter } from 'next/router';
import Link from 'next/link';
const Navitems = ({ navbar }) => {
const router = useRouter();
return (
<>
<li className='nav-items'>
<Link href={navbar.link}>
<a
className={
router.pathname == navbar.link
? ' nav-links active'
: ' nav-links'
}
>
{navbar.title}
</a>
</Link>
</li>
</>
);
};
Navitems.propTypes = {
navbar: PropTypes.array.isRequired,
}
export default Navitems; 

最后在导航栏中输入数组

{
Navheader.map((navbar) => (
<Navitems key={navbar.id} navbar={navbar} />
))
}

我也有更简单的按钮在那里发生同样的事情

删除/这是我在类似问题中看到的事情之一，但它不起作用，如果有人知道为什么会发生这种情况，我会感谢你的帮助

Answer 1

Background

Next.js是一个静态页面生成器和服务器端渲染框架。因此，它创建来自服务器(或缓存)的页面，以便在导航时加载页面。使用next/link(<Link>标记)通过预取缓存的静态页面来优化这一点，这使得加载非常快速。

当您在开发模式下运行时，此优化不会发生，因此您只会看到next/link优化与生产构建一起工作。此外，这只预取静态页面，因此它仍然需要加载SSR页面。

也就是说，如果你正在寻找一个不"重新加载"的解决方案;然后你需要一个纯的反应溶液。但是你将错过使用next的SEO好处。

Answer 2

importNextLinkfromnext/linkfor SPA Pages