Next.js动态路由与Link组件疑问：URL附加slug参数问题

问题原因 #

你的路由是pages/shop/[[...slug]].js这种可选捕获所有动态路由，出现多余?slug=beer的原因如下：

1. 你在<Link>里同时使用了href="pages/shop/beer"和as="pages/shop/beer"，Next.js的Link组件会错误解析路径，把匹配到的动态路由参数（beer）当成查询参数附加到URL上。
2. 没有按照动态路由的规范给Link组件传参，而是直接写了完整路径，导致组件无法正确识别路由结构，进而生成多余参数。

另外直接在地址栏访问正常，是因为此时Next.js的服务端路由匹配器会直接把beer解析为slug参数，不会额外生成查询参数；而Link是客户端跳转，遵循前端路由的解析逻辑。

解决方法 #

方法一：按动态路由规范传参（推荐） #

用对象格式的href，明确指定动态路由的参数：

<Link href={{
  pathname: '/pages/shop/[[...slug]]',
  query: { slug: ['beer'] }
}}>
  跳转到啤酒页面
</Link>

这种方式下，Next.js会自动生成正确的URL/pages/shop/beer，不会附加多余的查询参数。

方法二：直接使用路径字符串并移除as属性 #

如果不想用对象传参，直接写路径字符串时，不需要指定as属性：

<Link href="/pages/shop/beer">跳转到啤酒页面</Link>

as属性主要用于路由重写场景，在你这个正常匹配动态路由的场景下完全不需要，额外指定反而会触发组件的错误解析逻辑。

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