Next.js如何让[...slug].js同时匹配countries根路由及子路径

你当前使用的[...slug].js是必选捕获所有动态路由，仅能匹配/countries/开头且后面带有路径段的地址，无法匹配空的根路径/countries。要实现单文件同时适配所有路径，使用Next.js提供的可选捕获所有动态路由即可。

第一步：修改动态路由文件名 #

将pages/countries/[...slug].js文件重命名为[[...slug]].js，使用双层中括号包裹参数名是可选捕获路由的专属语法，它可以同时匹配两种场景：

• 根路径：/countries，此时路由参数slug为undefined
• 子路径：/countries/united-states、/countries/france等，此时路由参数slug为对应路径段组成的数组，例如['united-states']

第二步：代码兼容参数差异 #

因为根路径和子路径的slug参数值不同，需要在代码中做兼容处理，示例如下：

组件内参数处理 #

import { useRouter } from 'next/router'

export default function CountriesPage() {
  const router = useRouter()
  // 统一参数格式，根路径时slug为空数组
  const slug = router.query.slug || []

  // 后续业务逻辑统一处理：
  // slug长度为0 => 展示国家列表页（对应/countries）
  // slug长度为1 => 展示对应国家详情页（对应/countries/xxx）
}

静态生成getStaticPaths配置（如果使用SSG） #

如果页面使用静态生成模式，需要在getStaticPaths中显式包含根路径的配置：

export async function getStaticPaths() {
  return {
    paths: [
      // 根路径配置，无需传slug参数
      { params: {} },
      // 各个国家子路径配置
      { params: { slug: ['united-states'] } },
      { params: { slug: ['france'] } },
      { params: { slug: ['united-kingdom'] } }
    ],
    fallback: false // 可根据你的需求调整为true或'blocking'
  }
}

验证效果 #

修改完成后删除原来的pages/countries/index.js，即可同时访问/countries根路径和所有国家子路径，仅需维护一份代码即可。

注：可选捕获所有动态路由是Next.js 9.3及以上版本支持的特性，如果你使用的版本低于9.3需要先升级Next.js版本。

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