Next.js App Router下基于目录结构动态计算Link的href值

1. 最简洁的方案：使用相对路径<Link> #

在level-1页面的组件中，直接使用不带开头斜杠的相对路径即可，Next.js会自动基于当前路由（/level-1）拼接目标路径：

import Link from 'next/link';

export default function Level1Page() {
  // 自动指向 /level-1/level-2
  return <Link href="level-2">跳转到level-2页面</Link>;
}

这个方式同时支持服务器组件和客户端组件，无需额外逻辑。

2. 动态获取当前路径拼接（客户端组件） #

如果需要更灵活的路径处理（比如动态生成多个子路径），在客户端组件中可以用usePathname：

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function Level1Page() {
  const currentPath = usePathname(); // 当前路径：/level-1
  const targetPath = `${currentPath}/level-2`;

  return <Link href={targetPath}>跳转到level-2页面</Link>;
}

3. 动态获取当前路径拼接（服务器组件） #

服务器组件无法使用usePathname，可以通过headers()解析请求URL来获取当前路径：

import Link from 'next/link';
import { headers } from 'next/headers';

export default function Level1Page() {
  const headerList = headers();
  const requestUrl = new URL(headerList.get('next-url') || '');
  const currentPath = requestUrl.pathname; // 当前路径：/level-1
  const targetPath = `${currentPath}/level-2`;

  return <Link href={targetPath}>跳转到level-2页面</Link>;
}

4. 适配动态路由场景 #

如果level-1是动态路由（比如/[category]/page.js），可以直接通过路由参数拼接路径：

import Link from 'next/link';

export default function Level1Page({ params }) {
  // params.category 就是动态路由的参数值（比如"level-1"）
  const targetPath = `/${params.category}/level-2`;
  
  return <Link href={targetPath}>跳转到level-2页面</Link>;
}

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