Next.js中RootLayout的usePathname未在部分页面正常输出路径

1. 修正路由文件结构 #

Next.js App Router 的页面必须放在app目录下的对应路由文件夹里，页面文件名固定为page.tsx（默认小写）。你提到的src/page/Login结构错误，正确的 Login 页面路径应该是：

src/app/login/page.tsx

如果需要使用大写路径/Login，需在next.config.js中开启大小写敏感配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    caseSensitiveRoutes: true,
  },
};

module.exports = nextConfig;

建议遵循官方规范使用小写路由，避免不必要的问题。

2. 使用Next.js Link组件进行路由切换 #

不要用原生<a>标签跳转，必须使用 Next.js 提供的Link组件，这样才能触发客户端路由，让usePathname正确捕获路径变化：

import Link from 'next/link';

// 示例：跳转到登录页
<Link href="/login">登录</Link>

原生a标签会触发页面全量刷新，不仅体验差，还可能导致路径捕获异常。

3. 改用useEffect监听路径变化 #

你原来的代码在组件渲染时直接打印日志，可能因渲染时机问题，路由切换时无法触发更新。改用useEffect监听pathname，确保路径变化时立即输出日志：

'use client';

import { Inter } from 'next/font/google';
import { usePathname } from 'next/navigation';
import './globals.css';
import { checkIsPublicRoute } from '@/functions/check-is-public-route';
import { useEffect } from 'react';

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  const pathname = usePathname();

  useEffect(() => {
    console.log("当前路径:", pathname);
    const isPublicPage = checkIsPublicRoute(pathname!);
    console.log("是否为公开页面:", isPublicPage);
  }, [pathname]); // 依赖pathname，路径变化时自动执行

  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

4. 排查缓存问题 #

如果以上方法无效，可能是布局被意外缓存，在layout.tsx顶部添加配置强制动态渲染：

export const dynamic = 'force-dynamic';

额外排查点 #

• 确认 Next.js 版本为13.4及以上，旧版本 App Router 存在usePathname相关bug；
• 检查是否有路由中间件（middleware.ts）修改了请求路径，导致usePathname获取到修改后的根路径；
• 清空浏览器缓存，重启开发服务器（关闭npm run dev后重新启动），避免缓存干扰。

内容的提问来源于stack exchange，提问作者Samuel Máximo