Next.js Link组件路由替换而非追加问题求助

问题场景 #

你的App Router结构如下：

-> profile
    -> page.tsx
    -> layout.tsx
    -> locations (folder)
        -> page.tsx

在profile/page.tsx中使用Link组件时，期望从/profile跳转到/profile/locations，但实际路径变成了/locations，设置replace属性也没有效果。

解决方案 #

1. 修正href路径写法 #

问题核心是你用了绝对路径（以/开头），这种写法会直接替换根路径。要使用相对路径才能基于当前路由追加：

• 直接写href="locations"
• 或者写href="./locations"

2. 确认Link组件导入正确 #

确保你导入的是Next.js官方的Link组件：

import Link from 'next/link';

不要使用自定义的Link组件或者旧版本（Pages Router）的Link。

3. 检查路由结构正确性 #

确认locations文件夹确实在profile目录下，page.tsx文件名拼写正确（App Router必须用page.tsx作为路由入口文件）。

4. 清除开发缓存 #

有时候Next.js的缓存会导致路由异常，执行以下操作：

• 删除项目根目录下的.next文件夹
• 重启开发服务器（npm run dev或yarn dev）

正确示例代码 #

import Link from 'next/link';

export default function ProfilePage() {
  return (
    <div>
      <h1>我的个人资料</h1>
      {/* 正确写法：相对路径，跳转至/profile/locations */}
      <Link href="locations">查看地址</Link>
    </div>
  );
}

错误示例对比 #

// 错误写法：绝对路径，会跳转到/locations
<Link href="/locations">查看地址</Link>

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