Next/link跳转显示/post/[slug]路径同时传递id调用API的实现问题问询

问题本质：你之前将id放在href的query参数中，Next.js渲染路径时，除了匹配pathname动态路由的参数（也就是slug），剩余的query参数都会自动拼接在URL的?后面，因此id会暴露出来。以下是两种可行方案：

方案1：用Link的state属性传递隐藏参数（无需修改后端逻辑） #

next/link原生支持state属性，参数会存在浏览器会话历史中，不会出现在URL上，Pages Router和App Router都适用。

跳转端写法 #

import Link from 'next/link'

// 组件内调用
<Link 
  href={{
    pathname: '/post/[slug]',
    query: { slug: 'next-js' } // 只放需要显示在路径里的参数
  }}
  state={{ id: 123 }} // 隐藏参数放在这里
>
  跳转到对应文章
</Link>

目标页取值 #

如果你用Pages Router

import { useRouter } from 'next/router'

export default function PostPage() {
  const router = useRouter()
  const { slug } = router.query
  const { id } = router.state || {} // 拿到隐藏的id参数
  
  // 后续直接用id调用接口即可
}

如果你用App Router

'use client'
import { useParams } from 'next/navigation'

export default function PostPage() {
  const { slug } = useParams()
  const id = window.history.state?.id // 从会话历史取隐藏id

  // 降级逻辑：如果用户直接刷新页面导致state丢失，可以通过slug调用一次查询接口拿到对应id
}

注意：state仅在通过Link跳转时存在，用户刷新页面、直接输入URL访问时会丢失，需要补充降级逻辑。

方案2：后端适配slug查询（最优方案，支持所有访问场景） #

直接修改后端接口，支持传入slug参数查询对应文章数据，跳转时不需要传递id，完全避免id暴露的问题，同时用户刷新、收藏链接都能正常访问，无需额外处理状态丢失问题。
跳转写法可以简化为：

<Link href="/post/next-js">跳转到对应文章</Link>

目标页直接用slug调用接口即可，不需要处理隐藏参数。

内容的提问来源于stack exchange，提问作者tran dinh thang