Next.js Link组件嵌套动态路由路径追加问题的正确处理方案是什么？

前置误区澄清 #

1. Next.js 的 Link 组件用于内部路由跳转时，不需要手动拼接域名，自带的路径处理逻辑会自动适配当前部署的域名、配置的basePath等参数，手动加域名反而会被识别为外部链接，失去客户端无刷新跳转的优势。
2. router.pathname 返回的是路由文件在文件系统中的路径，天然携带[pid]这类动态参数占位符，本来就不用于拼接实际访问路径。

可行实现方案 #

方案1：直接拼接动态参数（最推荐，逻辑最清晰）

直接从router.query中取出动态参数pid拼接路径，兼容性最高：

import { useRouter } from 'next/router'
import Link from 'next/link'

// 组件内逻辑
const router = useRouter()
// 适配服务端渲染初始阶段query为空的场景
if (!router.query.pid) return null

return (
  <Link href={`/projects/${router.query.pid}/apple`}>
    <a>Business name</a>
  </Link>
)

这种写法不受当前页面路径的查询参数、锚点等内容影响，稳定性最高。

方案2：使用asPath处理后拼接

如果不想硬写前缀路径，可以用router.asPath（返回当前页面实际访问的路径），处理掉可能的查询参数和末尾斜杠后再拼接：

const currentPath = router.asPath.replace(/\?.*/, '').replace(/\/$/, '')
return (
  <Link href={`${currentPath}/apple`}>
    <a>Business name</a>
  </Link>
)

适合路由层级更深、不想重复写前缀路径的场景。

方案3：使用href对象写法（官方推荐的参数化写法）

如果目标路径也是动态路由，或者后续需要加更多查询参数，可以用Link组件的对象式href写法：

<Link
  href={{
    pathname: '/projects/[pid]/apple',
    query: { pid: router.query.pid }
  }}
>
  <a>Business name</a>
</Link>

这种写法结构更清晰，参数多的时候更易维护。

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