Next.js使用next/router如何实现带动态参数的路径重定向

针对/example/[动态参数]统一跳转至/otherExample/[同动态参数]的需求，不需要硬编码全路径等值判断，以下是可直接落地的实现方式：

客户端组件内逻辑实现 #

适合只需要在特定页面/组件内触发跳转的场景，直接通过路径规则匹配提取动态部分即可。

简单前缀匹配（单动态段场景首选） #

if (router.asPath.startsWith('/example/')) {
  // 截掉固定前缀，拿到动态变化的路径部分
  const dynamicSegment = router.asPath.slice('/example/'.length)
  Router.push(`/otherExample/${dynamicSegment}`)
}

正则严谨匹配（复杂路径场景用） #

如果需要严格校验路径格式，避免误匹配前缀相似的路径，可以用正则捕获动态段：

// 正则规则：严格匹配/example/开头，后续跟随至少1位路径字符的路径
const matchResult = router.asPath.match(/^\/example\/(.+)$/)
if (matchResult) {
  // 捕获组第1项就是动态参数内容
  const dynamicPart = matchResult[1]
  Router.push(`/otherExample/${dynamicPart}`)
}

如果你的动态参数是纯数字ID，还可以把正则收紧为/^\/example\/(\d+)$/，进一步避免误匹配。

全局配置层重定向（推荐优先用） #

如果是全站范围内的路径规则跳转，不需要在组件里写客户端判断，直接在Next.js配置文件里定义重定向规则即可，跳转发生在页面加载前，体验更好：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/example/:slug*', // 通配符匹配所有/example前缀下的路径
        destination: '/otherExample/:slug*', // 自动把捕获的动态路径拼接至目标地址
        permanent: false, // 临时跳转设为false，永久301跳转设为true
      },
    ]
  },
}

module.exports = nextConfig

如果只需要匹配单段动态ID，把source改成/example/:id、destination改成/otherExample/:id即可，匹配精度更高。

注意：如果是在useEffect钩子中写客户端跳转逻辑，记得将router加入依赖数组，保证路由变化时判断逻辑能正常触发。

内容的提问来源于stack exchange，提问作者Süleyman TAŞÇI