Next.js中如何从路径中提取末级子路由段？

问题描述 #

在Next.js项目中开发自定义面包屑组件时，其余功能均已正常运行，仅路径提取环节存在异常：项目同时存在/people页面与/people/roles页面，需要定义逻辑仅获取路径中类似roles的末级子路由部分。
初始实现代码如下：

const x = router.pathname  == "/dashboard" ? 'home' : router.pathname
const [subTitle, setSubTitle] = x.split('/')

上述代码运行后仅返回/，无法得到预期结果。曾考虑通过正则实现该需求，但对正则用法不熟悉，需要能够将pathname有效拆分数组、准确提取目标路由段的方案。

问题原因 #

直接调用split('/')拆分路径时，由于路径以/开头，拆分后的数组第一个元素为空字符串。例如/people/roles拆分后得到的数组为['', 'people', 'roles']，直接解构取值无法拿到目标内容。

可落地方案 #

方案1：原生字符串拆分（无正则，易扩展） #

过滤拆分后的空值，再取数组最后一位即可，逻辑简单易维护，同时拆分得到的数组可直接用于生成多层级面包屑：

// 拆分路径并过滤空值
const pathSegments = router.pathname.split('/').filter(Boolean)
// 处理dashboard的特殊映射
const subTitle = router.pathname === '/dashboard'
  ? 'home'
  : pathSegments[pathSegments.length - 1]

不同路径下的返回结果：

• 路径为/dashboard时，返回home
• 路径为/people时，返回people
• 路径为/people/roles时，返回roles
• 路径为/people/roles/edit时，返回edit
  如果需要实现完整面包屑层级，直接遍历pathSegments数组即可，无需重复处理路径。

方案2：正则匹配实现 #

如果需要更精简的写法，可通过正则直接匹配最后一个斜杠后的内容：

const getLastPathSegment = (path) => {
  if (path === '/dashboard') return 'home'
  const matched = path.match(/\/([^/]+)$/)
  return matched ? matched[1] : ''
}
const subTitle = getLastPathSegment(router.pathname)

该方案与方案1效果完全一致。

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