Next.js如何用单个文件匹配根路径/与动态路由/param

这个问题我之前也碰到过，Next.js的Pages Router里刚好有个完美的解决方案——可选动态路由，具体操作很简单：

1. 修改路由文件名 #

把你现在的pages/[product-id].js重命名为pages/[[product-id]].js。

这里的双中括号[[xxx]]是Next.js的语法糖，用来标记可选的路由参数：

• 当访问根路径/时，路由参数product-id会是undefined，组件会按原首页逻辑渲染产品列表
• 当访问/1234这类带参数的路径时，组件会捕获到product-id=1234，执行滚动逻辑

2. 调整组件内的参数处理逻辑 #

因为现在product-id可能不存在，所以要在代码里加个判断，避免空值报错。修改后的组件示例：

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function ProductListPage() {
  const router = useRouter();
  // 当访问/时，selectedProductId会是undefined
  const selectedProductId = router.query['product-id'];

  useEffect(() => {
    // 仅当存在有效product-id时执行滚动
    if (selectedProductId) {
      const targetElement = document.getElementById(selectedProductId);
      if (targetElement) {
        // 可选：添加平滑滚动提升体验
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  }, [selectedProductId]);

  // 这里放你原pages/index.js里的产品列表渲染逻辑
  return (
    <div className="product-list">
      {/* 示例产品项，id对应路由参数 */}
      <div id="1234" className="product-card">产品A</div>
      <div id="5678" className="product-card">产品B</div>
      <div id="9012" className="product-card">产品C</div>
    </div>
  );
}

3. 清理冗余文件 #

记得把原来的pages/index.js删掉，避免路由冲突——现在[[product-id]].js已经完全接管了根路径和带参数的路由请求。

补充说明 #

如果你需要支持多级路径（比如/category/1234），可以用[[...product-id]].js（三个点表示捕获所有路由分段），但你的场景里单个参数用[[product-id]]就足够了。

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