Next.js最佳实践：多组件用useRouter取pathname还是传props？

1. 在Layout里获取pathname后传给子组件 #

优势 #

• 状态统一：两个导航组件共用同一个pathname来源，不会出现路由切换时组件间路径不同步的问题。
• 减少重复代码：不用在NavMobile和NavDtop里重复编写useRouter()及路径取值逻辑，代码更简洁。
• 测试更便捷：子组件通过props接收路径，测试时直接传入模拟值即可，无需额外模拟useRouter钩子。

代码示例 #

// Layout组件
import { useRouter } from 'next/router';
import NavMobile from './NavMobile';
import NavDtop from './NavDtop';

export default function Layout({ children }) {
  const router = useRouter();
  const currentPage = router.pathname;

  return (
    <>
      {window.innerWidth < 768 ? (
        <NavMobile currentPage={currentPage} />
      ) : (
        <NavDtop currentPage={currentPage} />
      )}
      {children}
    </>
  );
}

// NavMobile组件
export default function NavMobile({ currentPage }) {
  return (
    <nav>
      <a href="/" className={currentPage === '/' ? 'disabled' : ''}>首页</a>
      {/* 其他导航项 */}
    </nav>
  );
}

2. 每个导航组件自行获取pathname #

优势 #

• 组件独立性强：导航组件不依赖父组件传值，可直接在任意页面复用，无需适配父组件逻辑。
• 避免层级传值：若后续导航组件的子元素也需要路径，不用层层向下传递props，直接自行获取即可。

代码示例 #

// NavMobile组件
import { useRouter } from 'next/router';

export default function NavMobile() {
  const router = useRouter();
  const currentPage = router.pathname;

  return (
    <nav>
      <a href="/" className={currentPage === '/' ? 'disabled' : ''}>首页</a>
      {/* 其他导航项 */}
    </nav>
  );
}

// Layout组件
import NavMobile from './NavMobile';
import NavDtop from './NavDtop';

export default function Layout({ children }) {
  return (
    <>
      {window.innerWidth < 768 ? (
        <NavMobile />
      ) : (
        <NavDtop />
      )}
      {children}
    </>
  );
}

选择建议 #

• 如果导航组件仅在当前Layout中使用，且无复用需求，优先选第一种方案，代码更易维护。
• 如果导航组件需要在多场景复用，或希望保持组件的灵活性，选择第二种方案更合适。

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