如何在Next.js（App Router）<Link>组件导航前添加额外逻辑？

方案1：通过onClick拦截并手动控制导航 #

直接给<Link>绑定点击事件，先执行你的关闭提示逻辑，再手动触发Next.js的客户端导航。同时要区分普通左键点击和右键/新标签页打开的场景，避免不必要的逻辑执行。

import Link from 'next/link'
import { useRouter } from 'next/router'
import { useItemContext } from '../contexts/ItemContext'

const SidebarItemLink = ({ href, itemId }) => {
  const router = useRouter()
  const { clearActiveItem } = useItemContext()

  const handleNavClick = (e) => {
    // 跳过右键、Ctrl+点击、Cmd+点击（这类操作是打开新标签页）
    if (e.button !== 0 || e.metaKey || e.ctrlKey) return

    e.preventDefault()
    // 执行自定义逻辑：关闭当前item的选中提示
    clearActiveItem()
    // 触发Next.js客户端导航
    router.push(href)
  }

  return (
    <Link href={href} onClick={handleNavClick}>
      <a>处理{itemId}</a>
    </Link>
  )
}

方案2：监听路由前进/后退事件 #

针对浏览器前进、后退按钮的场景，用Next.js路由的beforePopState事件在路由变化前执行关闭逻辑：

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import { useItemContext } from '../contexts/ItemContext'

const Sidebar = () => {
  const router = useRouter()
  const { clearActiveItem } = useItemContext()

  useEffect(() => {
    const handleBeforePop = () => {
      // 前进/后退前关闭选中提示
      clearActiveItem()
      return true // 允许路由正常跳转
    }

    router.beforePopState(handleBeforePop)

    // 组件卸载时清理监听
    return () => {
      router.beforePopState(() => true)
    }
  }, [router, clearActiveItem])

  // 渲染侧边栏链接...
}

方案3：封装可复用的自定义Link组件 #

把导航前的逻辑封装成通用组件，避免重复代码：

import Link from 'next/link'
import { useRouter } from 'next/router'
import { useItemContext } from '../contexts/ItemContext'

const CustomItemLink = ({ href, children }) => {
  const router = useRouter()
  const { clearActiveItem } = useItemContext()

  const handleClick = (e) => {
    if (e.button !== 0 || e.metaKey || e.ctrlKey) return

    e.preventDefault()
    clearActiveItem()
    router.push(href)
  }

  return (
    <Link href={href} onClick={handleClick}>
      {children}
    </Link>
  )
}

// 使用示例
<CustomItemLink href="/items/456">
  <a>Item 456</a>
</CustomItemLink>

注意事项 #

• 区分点击场景：确保只有用户在当前页面打开链接时才执行关闭逻辑，新标签页打开时不触发。
• 同步持久化：如果你的选中状态存在LocalStorage中，clearActiveItem方法要同时更新LocalStorage的值。
• 清理监听：路由事件的监听要在组件卸载时移除，避免内存泄漏。

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