NextJS 13 app目录下如何在layout.js中获取完整路径？

核心方案 #

在App Router模式下，你可以通过usePathname钩子获取当前页面的路径（比如/events/345/edit），结合路径映射就能动态生成页面名称。如果需要完整URL（包含域名、查询参数），可以搭配useSearchParams和客户端的window.location.origin实现。

具体实现步骤 #

1. 将layout转为客户端组件：因为usePathname等导航钩子只能在客户端组件中使用，所以需要在layout.js顶部加上'use client'指令。
2. 导入必要钩子：从next/navigation导入usePathname和useSearchParams。
3. 路径映射页面名称：根据获取到的路径，通过判断逻辑返回对应的页面名称。
4. 渲染页面名称：在layout中渲染页面名称，所有子页面都会继承这个布局，自动显示对应标题。

代码示例 #

layout.js

'use client';

import { usePathname, useSearchParams } from 'next/navigation';

export default function RootLayout({ children }) {
  // 获取当前路径
  const pathname = usePathname();
  // 获取查询参数（如果需要）
  const searchParams = useSearchParams();

  // 生成完整URL（包含域名和查询参数）
  const origin = typeof window !== 'undefined' ? window.location.origin : '';
  const fullUrl = `${origin}${pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;

  // 根据路径匹配页面名称
  const getPageTitle = (path) => {
    // 匹配动态路径 /events/xxx/edit
    if (/^\/events\/\d+\/edit$/.test(path)) {
      return '编辑活动';
    }
    // 其他固定路径匹配
    switch (path) {
      case '/':
        return '首页';
      case '/events':
        return '活动列表';
      default:
        return '未知页面';
    }
  };

  const pageTitle = getPageTitle(pathname);

  return (
    <html lang="zh-CN">
      <body>
        {/* 显示页面名称 */}
        <header>
          <h1>{pageTitle}</h1>
          {/* 可选：显示完整URL */}
          <p>当前URL：{fullUrl}</p>
        </header>
        <main>{children}</main>
      </body>
    </html>
  );
}

注意事项 #

• 动态路径（如/events/[eventId]/edit）需要用正则表达式匹配，因为usePathname返回的是实际路径（比如/events/345/edit）而非模板路径。
• 如果不需要完整URL，只用usePathname获取路径即可，无需处理origin和查询参数。
• 服务端组件无法直接使用导航钩子，必须添加'use client'转为客户端组件。

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