Next.js App Router中如何从父路由访问子路由参数？

阿华AIGC实验室

2026-4-13

嘿，这个问题我之前也踩过坑！在App Router的设计逻辑里，父层级的服务器组件（比如你的根layout.tsx或者page.tsx）确实没办法直接拿到子路由的动态参数——因为父组件是在路由匹配的早期阶段就渲染了，压根不知道后续的路由段内容。不过别担心，有几个实用的方案能解决这个问题：

方案一：利用中间件（Middleware）给服务器组件传参数

这个方法适合你全程用服务器组件的场景，步骤很清晰：

在项目根目录创建middleware.ts文件，拦截带[category]参数的请求，把参数塞进自定义请求头里：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 从路径里提取category参数，比如路径是/products/electronics，split后取索引2的内容
  const category = request.nextUrl.pathname.split('/')[2];
  if (category) {
    // 克隆请求对象，添加自定义请求头
    const requestHeaders = new Headers(request.headers);
    requestHeaders.set('x-category', category);
    
    return NextResponse.next({
      request: { headers: requestHeaders }
    });
  }
  return NextResponse.next();
}

// 指定中间件生效的路由规则，匹配所有带category参数的路由
export const config = {
  matcher: '/:category/:path*'
};

在根layout.tsx（服务器组件）里，通过headers()函数读取这个请求头：

import { headers } from 'next/headers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const headersList = headers();
  const category = headersList.get('x-category');
  
  return (
    <html lang="en">
      <body>
        {category && <div className="global-category">当前分类：{category}</div>}
        {children}
      </body>
    </html>
  );
}

这样用户访问/products/electronics时，根layout就能拿到electronics这个值了。

方案二：客户端组件+Context传递参数

如果你的根组件里有部分UI需要依赖这个参数，且可以改成客户端组件，这个方法逻辑更清晰：

先创建一个Context用来共享category参数：

// app/categoryContext.tsx
'use client';

import { createContext, useContext, ReactNode } from 'react';

type CategoryContextType = { category: string | null };

const CategoryContext = createContext<CategoryContextType>({ category: null });

export function CategoryProvider({ children, category }: { children: ReactNode; category: string | null }) {
  return (
    <CategoryContext.Provider value={{ category }}>
      {children}
    </CategoryContext.Provider>
  );
}

export function useCategory() {
  return useContext(CategoryContext);
}

在[category]/page.js里，用useParams拿到参数，再用Provider包裹页面内容：

// app/[category]/page.js
'use client';

import { useParams } from 'next/navigation';
import { CategoryProvider } from '../categoryContext';

export default function CategoryPage() {
  const params = useParams();
  const category = params.category as string;

  return (
    <CategoryProvider category={category}>
      <h1>{category}分类专属页面</h1>
      {/* 页面其他内容 */}
    </CategoryProvider>
  );
}

把根组件里需要用到参数的部分改成客户端组件，用useCategory获取参数：

// app/components/CategoryNav.tsx
'use client';

import { useCategory } from '../categoryContext';

export default function CategoryNav() {
  const { category } = useCategory();
  return category ? (
    <nav className="nav-highlight">当前分类：{category}</nav>
  ) : null;
}

最后在根layout.tsx里引入这个客户端组件：

// app/layout.tsx
import CategoryNav from './components/CategoryNav';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <CategoryNav />
        {children}
      </body>
    </html>
  );
}

这个方法的缺点是需要把用到参数的部分改成客户端组件，但胜在参数共享逻辑清晰，适合多组件需要用这个参数的场景。

方案三：把逻辑下移到子路由组件

如果你的需求只是展示或使用category参数，最简单的方式就是把相关逻辑直接放在[category]/page.js或者它的专属layout里——毕竟这个组件本来就可以直接拿到params prop（服务器组件也能拿到）：

// app/[category]/page.js
// 这里可以是服务器组件
export default function CategoryPage({ params }) {
  const category = params.category;
  
  return (
    <>
      <div>当前分类：{category}</div>
      {/* 页面其他内容 */}
    </>
  );
}

如果根layout只是需要根据category做一些全局调整（比如导航高亮），那前两个方案更合适；要是逻辑本身就属于子路由页面，这个方案最省事。

备注：内容来源于stack exchange，提问作者B45i