NextJs13的Link标签如何阻止跳转

前言

在项目开发过程中，我们往往会有这样的需求，假设这里有一个列表，列表中有很多很多的卡片，就在这样的场景下，我们如果需要阻止卡片的跳转，需要怎么来处理

思路

很多小伙伴会说，这还不简单，直接不要加点击事件或者直接用空的点击事件就完事了，这个确实是这样的，但是我们如果使用的不是nextJs13的router.push这样的跳转，而是用的Link标签呢。又有小伙伴会说，那就直接把Link标签改成div或者其他的标签，然后添加上点击事件就行嘞，这样的办法也不是不行，但是有没有能用Link标签又能阻止的办法呢？毕竟Link标签会帮我们提前请求数据，加快页面的访问速度。其实是有的，我们还记得在写javaweb和ajax的时候，是不是用过一个javascript:void(0); 没错，就是这个，还依稀记得当时用这个去阻止默认跳转时间，然后自己用函数处理逻辑。那这个javascript:void(0);放在Link标签下生不生效呢？一起试一下吧

实现

"use client"
import Link from 'next/link'
import React, { memo } from 'react'

const LayoutDemo01 = () => {
  return (
    <div className='flex flex-col'>
      <Link href="/demo02" >demo02</Link>
      <Link href="javascript:void(0);" >demo02 -- prevent</Link>
    </div>
  )
}

export default memo(LayoutDemo01)

这样，下面的Link标签就不会跳转啦