Next.js 13（app目录）布局文件中如何获取页面slug？

针对你在嵌套布局的头部组件里无法获取slug、没法跳转到/some-slug/signup的问题，给你两个实用的解决办法：

方法一：从路径中提取slug（通用场景） #

用usePathname钩子获取当前路径，再通过字符串分割提取slug。注意头部组件要加'use client'指令，因为用到了客户端钩子。

'use client';
import { usePathname, useRouter } from 'next/navigation';

export default function Header() {
  const pathname = usePathname();
  const router = useRouter();

  // 从路径中拆分出slug，假设当前路径是 /some-slug
  const slug = pathname.split('/')[1];

  const goToSignup = () => {
    if (slug) {
      router.push(`/${slug}/signup`);
    }
  };

  return (
    <header>
      <button onClick={goToSignup}>注册</button>
    </header>
  );
}

方法二：动态路由布局直接传参（更可靠） #

如果你的布局是在动态路由目录下（比如app/[slug]/layout.js），这个布局组件本身可以直接拿到params参数，直接把slug传给头部组件就行，不用处理路径拆分。

首先是动态路由的布局文件app/[slug]/layout.js：

import Header from './Header';

export default function SlugLayout({ children, params }) {
  return (
    <div>
      {/* 把拿到的slug传给Header组件 */}
      <Header slug={params.slug} />
      {children}
    </div>
  );
}

然后是头部组件Header.jsx：

'use client';
import { useRouter } from 'next/navigation';

export default function Header({ slug }) {
  const router = useRouter();

  const goToSignup = () => {
    router.push(`/${slug}/signup`);
  };

  return (
    <header>
      <button onClick={goToSignup}>注册</button>
    </header>
  );
}

要注意的是，App Router里的useRouter确实移除了旧的query属性，动态路由参数优先从布局/页面的params props获取，路径相关的用usePathname，查询参数用useSearchParams。

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