Next.js中如何实现点击返回按钮回到上一页面而非上一个URL地址

核心原因是你当前更新筛选参数时调用的是新增历史栈条目的push类API，每次筛选都会生成一条新的浏览历史，所以需要多次点击返回才能退出当前页面。只需将更新URL参数的逻辑改为replace类API，覆盖当前历史条目而非新增，就能实现需求。

原生JavaScript实现 #

将原来的history.pushState调用改为history.replaceState即可：

// 旧逻辑：每次筛选新增历史记录
function updateFilter(params) {
  const newUrl = new URL(window.location);
  Object.entries(params).forEach(([key, value]) => {
    newUrl.searchParams.set(key, value)
  })
  window.history.pushState({}, '', newUrl)
}

// 新逻辑：每次筛选覆盖当前历史记录
function updateFilter(params) {
  const newUrl = new URL(window.location);
  Object.entries(params).forEach(([key, value]) => {
    newUrl.searchParams.set(key, value)
  })
  window.history.replaceState({}, '', newUrl)
}

Vue Router 实现 #

将更新参数时调用的$router.push改为$router.replace：

// 选项式API写法
this.$router.replace({
  query: {
    ...this.$route.query,
    subject: 2 // 你的筛选参数
  }
})

// 组合式API写法
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

function updateFilter(key, value) {
  router.replace({
    query: {
      ...route.query,
      [key]: value
    }
  })
}

React Router 实现（v6版本） #

使用setSearchParams时传入replace: true配置，或者调用navigate时指定replace属性：

import { useSearchParams, useNavigate } from 'react-router-dom'

function BrowsePage() {
  const [searchParams, setSearchParams] = useSearchParams()
  const navigate = useNavigate()

  function updateFilter(key, value) {
    // 写法1：通过setSearchParams配置
    setSearchParams(prev => {
      prev.set(key, value)
      return prev
    }, { replace: true })

    // 写法2：通过navigate配置
    // searchParams.set(key, value)
    // navigate(`?${searchParams.toString()}`, { replace: true })
  }
}

特殊场景兼容 #

如果部分筛选操作需要保留历史记录，可在进入当前页时记录初始历史栈长度和来源地址，监听返回事件时直接跳回来源：

// 进入页面时存储初始信息
const entryHistoryLen = window.history.length
// 建议跳转进入当前页时将来源地址存在路由state中，比document.referrer更可靠
const entryFrom = sessionStorage.getItem('browseFrom') || '/'

window.addEventListener('popstate', () => {
  if (window.history.length > entryHistoryLen) {
    // 路由框架可直接调用对应replace方法跳回来源
    window.location.replace(entryFrom)
  }
})

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