Next.js接入国际化功能时如何正确处理router.back的跳转逻辑

问题原因 #

默认router.back()完全遵循浏览器历史栈规则执行，每次切换语言时如果用router.push更新路径，都会新增一条历史记录，两次切换语言后的历史栈结构为：

初始首页 -> 无语言前缀登录页 -> firstLang前缀登录页 -> secondLang前缀登录页
此时调用router.back()自然会回退到上一条历史记录，也就是firstLang前缀的登录页，符合浏览器原生行为。

实现方案 #

方案1：切换语言时用replace代替push（最简方案） #

从根源减少无用历史栈记录，切换语言时不新增历史条目，直接替换当前历史条目即可。修改切换语言的逻辑：

// 原逻辑（新增历史记录）
router.push(`/${newLocale}${router.asPath}`)

// 新逻辑（替换当前历史记录）
router.replace(`/${newLocale}${router.asPath}`)

修改后两次切换语言后的历史栈会变成：

初始首页 -> secondLang前缀登录页
此时调用原生router.back()就会直接回到当前语言的首页，完全符合需求。如果使用的是next-intl等封装好的i18n库，切换语言的方法同理替换为replace模式即可。

方案2：自定义返回方法，强制跳转到当前语言首页 #

如果需要保留切换语言的历史记录（比如普通场景下支持用户回退到上一个语言版本的页面，仅特定场景需要直接回到首页），可以自行封装自定义返回方法，替换原生的router.back()调用：

// Pages Router 实现
import { useRouter } from 'next/router'

const useCustomBack = () => {
  const router = useRouter()
  return () => {
    // 直接跳转到当前语言的根路径
    router.push(`/${router.locale}`)
  }
}

// App Router 实现
import { useRouter } from 'next/navigation'
import { useParams } from 'next/navigation'

const useCustomBack = () => {
  const router = useRouter()
  const params = useParams()
  return () => {
    router.push(`/${params.locale}`)
  }
}

在需要触发返回的位置调用封装好的customBack方法即可。

方案3：监听历史栈长度，兼容复杂业务场景 #

如果你的业务逻辑更复杂，比如部分页面需要正常回退上一级，仅登录页等特定页面需要直接回退到首页，可以在进入目标页面时记录当前历史栈长度，返回时计算需要回退的步数：

// 登录页组件内逻辑
useEffect(() => {
  // 进入登录页时记录当前历史栈长度
  sessionStorage.setItem('loginPageHistoryLength', window.history.length)
}, [])

const handleBack = () => {
  const loginHistoryLen = Number(sessionStorage.getItem('loginPageHistoryLength')) || 0
  // 计算需要回退的步数，直接回到进入登录页前的页面
  const backStep = window.history.length - loginHistoryLen + 1
  window.history.go(-backStep)
}

内容的提问来源于stack exchange，提问作者Zakaria Abdellatif