Next.js App Router中如何在父布局获取子路由slug参数

你的问题核心是：/app/spaces/layout.js作为父布局，无法直接获取子路由[slug]的参数——因为App Router中布局组件的params仅包含当前路由段的动态参数，而/spaces本身没有动态段，所以params为空。下面提供两种可行的解决方案：

方法1：通过URL解析提取slug（服务器组件可用） #

在/app/spaces/layout.js中，利用服务器组件可访问请求头的特性，解析URL路径提取slug：

import { headers } from 'next/headers';

export default async function SpacesLayout({ children }) {
  const headerUrl = headers().get('next-url');
  if (!headerUrl) {
    return <>{children}</>;
  }
  
  const url = new URL(headerUrl);
  const pathSegments = url.pathname.split('/');
  // 定位slug在路径中的位置：/spaces/{slug}/xxx
  const slugIndex = pathSegments.indexOf('spaces') + 1;
  const slug = pathSegments[slugIndex];

  // 示例：根据slug获取数据
  // if (slug) {
  //   const spaceData = await fetch(`/api/spaces/${slug}`).then(res => res.json());
  // }

  return (
    <div>
      {/* 在这里使用slug相关逻辑 */}
      {children}
    </div>
  );
}

这种方式依赖固定路由结构，若后续路由调整需同步修改解析逻辑。

方法2：重组路由逻辑，将动态段布局作为二级布局 #

如果业务允许，把需要使用slug的逻辑迁移到/app/spaces/[slug]/layout.js中，该布局可直接通过params获取slug：

// /app/spaces/[slug]/layout.js
export default async function SpaceSlugLayout({ children, params }) {
  const { slug } = params;
  // 这里可以直接使用slug处理业务逻辑，比如获取空间详情
  // const space = await getSpaceDetail(slug);

  return (
    <div>
      {/* 放置原本在spaces/layout.js中依赖slug的内容 */}
      {children}
    </div>
  );
}

而/app/spaces/layout.js仅保留不需要slug的通用布局逻辑，比如导航栏、全局样式等。

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