Next/Link组件如何设置不触发页面重载的默认href值？

问题原因 #

Next.js的<Link>组件对href属性有强制必填校验，且默认会对传入的href执行路由跳转逻辑：直接传入#时会触发路由匹配逻辑导致页面重载，留空则会触发props类型校验报错。

适配场景的解决方法 #

你可以在渲染时判断是否存在有效href，对无有效链接的条目统一设置占位href，同时绑定点击事件阻止默认跳转行为，触发你的弹窗逻辑即可，有两种常用的占位href写法：

• 写法1：用javascript:void(0)作为占位href，本身不会触发任何跳转逻辑，代码示例：

import Link from 'next/link';

// 遍历渲染集合的逻辑
{
  dataList.map((item, index) => (
    <Link
      key={index}
      href={item.jumpUrl || 'javascript:void(0)'}
      onClick={(e) => {
        if (!item.jumpUrl) {
          // 阻止默认跳转行为
          e.preventDefault();
          // 替换为你自己的弹窗逻辑
          alert('该内容暂无详情页');
        }
      }}
    >
      {item.title}
    </Link>
  ))
}

• 写法2：仍用#作为占位href，只需在无有效链接时阻止默认行为即可，不会触发页面重载：

<Link
  href={item.jumpUrl || '#'}
  onClick={(e) => {
    if (!item.jumpUrl) {
      e.preventDefault();
      // 弹窗逻辑
    }
  }}
>
  {item.title}
</Link>

拓展优化方案 #

如果不需要保持Link标签的统一DOM结构，也可以对无有效链接的条目直接渲染普通div或button标签，减少不必要的组件开销。

内容的提问来源于stack exchange，提问作者MVP