Next.js中点击按钮如何设置URL更新queryString保留筛选状态

这个需求完全可以实现，Next.js 原生路由能力就支持这种无刷新更新URL参数、同步浏览器历史栈的交互，不需要额外引入第三方依赖。

你要实现的「筛选操作同步URL、点击后退恢复上一次筛选状态」本质是做一层URL和筛选状态的双向绑定，核心逻辑只有两点：

• 筛选项变更时，不触发整页刷新，将当前筛选状态序列化后更新到URL query中，按需决定是否新增浏览器历史记录
• 页面初始化、触发浏览器前进/后退动作时，从当前URL的query参数里反序列化出筛选状态，驱动筛选控件、结果面板同步渲染

你示例里把整个筛选结构体编码后存到key这个query字段下的写法完全可行，只需要在序列化/反序列化时做好URL编码，避免特殊字符（大括号、引号、&符号等）破坏URL格式即可。

Next.js 分两种路由模式，核心逻辑一致，API稍有区别：

1. Pages Router（Next.js 旧版路由） #

直接使用next/router导出的useRouter hook即可，核心是开启shallow: true配置实现无刷新路由更新，示例代码：

import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'

// 默认筛选状态
const DEFAULT_FILTERS = {
  currentPage: 1,
  pageSize: 10,
  gte: null,
  lte: null,
  keyName: null,
  filters: []
}

// 筛选状态序列化到URL参数
const stringifyFilters = (state) => encodeURIComponent(JSON.stringify(state))
// 从URL参数解析筛选状态，加兜底容错
const parseFilters = (queryVal) => {
  if (!queryVal) return DEFAULT_FILTERS
  try {
    return { ...DEFAULT_FILTERS, ...JSON.parse(decodeURIComponent(queryVal)) }
  } catch (err) {
    return DEFAULT_FILTERS
  }
}

export default function ListPage() {
  const router = useRouter()
  // 初始化时直接从URL取初始筛选状态
  const [filterState, setFilterState] = useState(() => parseFilters(router.query.key))

  // 监听路由变化（包含浏览器前进/后退触发的路由变更），同步筛选状态
  useEffect(() => {
    const syncStateFromUrl = (url) => {
      const urlInstance = new URL(url, window.location.origin)
      setFilterState(parseFilters(urlInstance.searchParams.get('key')))
    }
    router.events.on('routeChangeComplete', syncStateFromUrl)
    return () => router.events.off('routeChangeComplete', syncStateFromUrl)
  }, [router])

  // 筛选项变更触发的更新逻辑
  const handleFilterChange = (partialNewFilter) => {
    const nextState = { ...filterState, ...partialNewFilter }
    setFilterState(nextState)
    // 注意shallow: true必须加，不会触发服务端数据重跑、页面不会整页重载
    // 如果需要每一步筛选都能通过后退回溯，用router.push；如果不需要多步回溯，换成router.replace即可
    router.push(
      {
        pathname: router.pathname,
        query: { key: stringifyFilters(nextState) }
      },
      undefined,
      { shallow: true }
    )
  }

  // 后续直接用filterState驱动筛选控件选中态、列表数据请求即可
  return <div>{/* 页面业务内容 */}</div>
}

2. App Router（Next.js 13+ 新版路由） #

使用next/navigation导出的useRouter、useSearchParams、usePathname三个hook组合实现，同样支持shallow路由更新，状态双向绑定的逻辑和Pages Router完全一致，只是API调用方式稍有调整。

• 不要手动拼接URL字符串更新地址，一定要用路由实例提供的query参数更新方法，避免编码错误、路由匹配异常
• shallow: true配置必须添加，否则每次更新query都会触发页面服务端逻辑重新执行，导致页面闪屏，不符合页内更新结果的交互需求
• 根据产品交互选择路由更新方式：如果需要用户每一次筛选操作都可以通过后退回溯，用router.push新增历史记录；如果希望点击后退直接离开当前列表页，用router.replace替换当前历史记录即可
• 解析URL参数时一定要加try/catch兜底，避免用户手动修改URL参数、或者参数格式异常导致页面白屏
• 列表数据请求的依赖项要绑定到从URL解析出的状态，不要绑定到本地未同步的临时状态，保证前进/后退时数据能正确刷新

你给出的示例URL格式完全合法，只要做好序列化时的编码处理，整个流程没有任何框架层面的阻碍。

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