Next.js二级动态路由实现方法咨询

下面分两种常用的Next.js路由系统来实现，你可以根据自己的项目版本选择：

Pages Router（Next.js 12及更早版本） #

• 按如下结构创建文件/文件夹：

  pages/
    company/
      [slug1]/
        [slug2].js
  

• 在[slug2].js中获取路由参数并渲染内容：

  import { useRouter } from 'next/router';
  
  export default function CompanyPage() {
    const router = useRouter();
    // 从query中拿到两个动态参数
    const { slug1, slug2 } = router.query;
  
    return (
      <div>
        <h2>当前一级路径：{slug1}</h2>
        <p>当前二级路径：{slug2}</p>
      </div>
    );
  }
  

  要是需要预渲染数据，还可以用getServerSideProps或getStaticProps来提前获取对应参数的内容。

App Router（Next.js 13+ 推荐使用） #

• 按如下结构创建文件/文件夹：

  app/
    company/
      [slug1]/
        [slug2]/
          page.js
  

• 在page.js中通过props直接拿到动态参数：

  export default function CompanyPage({ params }) {
    // params里包含slug1和slug2两个动态参数
    const { slug1, slug2 } = params;
  
    return (
      <div>
        <h2>当前一级路径：{slug1}</h2>
        <p>当前二级路径：{slug2}</p>
      </div>
    );
  }
  

  如果需要静态生成页面，可以在同目录下添加generateStaticParams函数，返回所有可能的slug组合；如果需要服务端渲染，直接在page组件里写异步逻辑拉取数据即可。

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