NextJS v14并行路由与动态路由共存时过滤组件显示问题

核心思路 #

利用NextJS的路由路径判断能力，在/products/layout.tsx中仅当当前路由为根路径/products时渲染过滤栏插槽，既保留原有的props.filters插槽结构，又能精准控制过滤栏的显示范围。

具体实现步骤 #

1. 在/products/layout.tsx中引入usePathname钩子（来自next/navigation），用于获取当前路由的完整路径。
2. 添加条件判断：仅当路径严格等于/products时，渲染过滤栏插槽内容。

代码示例：

import { usePathname } from 'next/navigation';

export default function ProductsLayout({ children, filters }: {
  children: React.ReactNode;
  filters: React.ReactNode;
}) {
  const pathname = usePathname();
  // 仅在/products根路径下显示过滤栏
  const shouldShowFilters = pathname === '/products';

  return (
    <div className="flex">
      {shouldShowFilters && <aside className="w-64">{filters}</aside>}
      <main className="flex-1">{children}</main>
    </div>
  );
}

为什么新增[productName]/layout.tsx无法解决问题？ #

NextJS的路由布局采用嵌套机制：[productName]/layout.tsx会作为/products/layout.tsx的children内容被包裹，父布局中的过滤栏代码仍会执行渲染。因此必须在父布局层面添加条件判断，才能彻底隐藏详情页的过滤栏。

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