Next.js中Link组件路径追加问题：如何替换当前路径？

不需要使用useRouter，直接用Link组件就能解决问题，关键是要按照Next.js动态路由的规范写法配置Link属性：

针对Pages Router（你的代码使用该模式） #

在动态路由页面跳转另一个动态路由时，需同时指定href和as参数：

• href：指向目标路由的文件路径（即/something/[test2]）
• as：指定浏览器地址栏显示的实际URL（即/something/test）

修改后的代码示例：

// 在 /foo/[test1] 页面中
export default function Home(){
    return(
       <Link href="/something/[test2]" as="/something/test"> Click me</Link>
    );
}

针对App Router（新版Next.js） #

可使用对象形式的href，明确指定路径名与查询参数：

<Link href={{ pathname: '/something/[test2]', query: { test2: 'test' } }}>Click me</Link>

问题原因 #

直接写字符串/something/test时，Next.js无法正确关联到/something/[test2]动态路由文件，尤其在当前处于动态路由页面的场景下，会错误将其解析为相对路径，导致路径被追加到当前/foo路由之后。通过规范的动态路由跳转写法，能让Next.js正确识别目标路由，实现根路径起始的跳转。

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