多次点击个人资料导航按钮导致页面频繁重载的解决及样式影响疑问

嘿，这个问题我之前也碰到过，太懂那种点好几次链接页面疯狂转圈的烦躁了！

首先说频繁重载的问题：你用原生<a>标签的话，每次点击都会触发浏览器的完整页面刷新，多次点击自然就会发送一堆重复请求，直到页面最终跳转。而Next.js的<Link>组件就是专门解决这个问题的——它做的是客户端路由导航，不会刷新整个页面，只会更新页面需要变化的部分，而且它会自动拦截重复的点击操作，不会多次发起请求，点多少次都只会触发一次导航，完美解决你说的问题。

然后是你担心的CSS样式影响问题，其实完全不用慌！只要你保持原来的样式结构不变就ok：

• 如果你的NavbarLink是自定义组件，里面原来用的是<a>标签加类名，那把<a>换成<Link>，给<Link>加上和原来<a>一样的类名，样式会完全继承，不会有任何变化；
• 要是你是直接给<a>写的内联样式，把内联样式移到<Link>上就行，效果和原来一模一样；
• 哪怕是用CSS Modules或者styled-components这类方案，只要类名或者样式目标的结构没改，样式就不会受影响。

举个简单的例子，假设你原来的代码是这样的：

const NavbarLink = ({ href, children }) => (
  <a href={href} className="nav-link-style">
    {children}
  </a>
)

换成Next.js的<Link>后就是：

import Link from 'next/link'

const NavbarLink = ({ href, children }) => (
  <Link href={href} className="nav-link-style">
    {children}
  </Link>
)

这样样式还是用原来的nav-link-style，完全没变化，用户根本看不出区别。

另外要是你用的是旧版Next.js的Pages Router，只需要在<Link>里面嵌套原来的<a>标签就行，给<a>保留原来的类名，样式也不会受影响。

备注：内容来源于stack exchange，提问作者oltrenin