Next.js不同页面无法使用shallow routing的替代实现方案咨询

Shallow路由仅支持同页面下的路由参数变更，跨不同页面路由的场景官方不原生支持，以下是可落地的实现方案：

方案1：原生History API直接修改URL #

• 实现逻辑：直接调用浏览器原生history.pushState或history.replaceState修改地址栏URL，该操作不会触发页面重渲染，也不会触发Next.js的页面生命周期
• 代码示例：

// 切换URL为/p/xxx，不触发重渲染
window.history.pushState({}, '', `/p/${id}`)

// 若需要监听浏览器前进后退操作，可添加popstate监听
useEffect(() => {
  const handlePopstate = () => {
    // 手动同步视图状态
  }
  window.addEventListener('popstate', handlePopstate)
  return () => window.removeEventListener('popstate', handlePopstate)
}, [])

• 注意：该方案修改的URL如果不存在对应的页面路由，用户刷新时会出现404，需提前做好路由兜底
• 适用场景：临时修改URL、不需要新URL支持SEO、不需要刷新后保留当前视图的场景

方案2：配置rewrites映射多路径到同一页面 #

• 实现逻辑：在next.config.js中配置重写规则，将/s/:id和/p/:id两个路径指向同一个页面组件，此时两个路径本质属于同页面路由，可直接使用shallow路由跳转
• 代码示例：

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/s/:id',
        destination: '/common-page/:id',
      },
      {
        source: '/p/:id',
        destination: '/common-page/:id',
      },
    ]
  },
}

跳转时正常使用Next.js路由即可：

router.push('/p/[id]', `/p/${id}`, { shallow: true })

• 适用场景：需要两个URL均可正常独立访问、需要SEO友好、长期维护的业务场景，是最稳定的通用方案

方案3：状态提升到公共上层布局 #

• 实现逻辑：如果两个路由共用同一上层布局（Pages Router的_app.js或App Router的layout.js），将需要保留的状态存储在上层布局中，跳转时上层布局不会重渲染，仅页面组件重新挂载，用户无感知
• 适用场景：不想修改路由配置、两个页面逻辑差异较大但核心展示状态可抽离的场景

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