react19中setSearchParams的5种传参实现

import { useSearchParams } from 'react-router-dom'
// 解构：searchParams读取参数，setSearchParams修改URL查询参数
const [searchParams, setSearchParams] = useSearchParams()

// URL 变为 /?if_login=true&name=朝阳
setSearchParams({
  if_login: 'true',
  name: '测试&首页' // 内部自动编码
})

// 当前URL：/?if_login=true&sort=price
setSearchParams(prev => {
  // prev 是原始 searchParams 对象（URLSearchParams）
  prev.set('page', '2') // 新增/修改page，保留if_login、sort
  prev.set('name', '朝阳')
  return prev
})
// 结果：/?if_login=true&sort=price&page=2&name=%E6%9C%9D%E9%98%B3

setSearchParams(prev => {
  prev.set('page', 1) // 修改
  prev.delete('sort') // 删除某个参数
  return prev
})

const params = new URLSearchParams()
params.set('if_login', 'true')
params.set('name', '朝阳')
setSearchParams(params)

setSearchParams("if_login=true&name=朝阳")
setSearchParams("?if_login=true&name=朝阳") // 带?也兼容

setSearchParams([
  ['page', '1'],
  ['tag', 'react'],
  ['tag', 'router']
])
// ?page=1&tag=react&tag=router

// 替换模式，不增加历史栈
setSearchParams({ page: 3 }, { replace: true })

// 回调搭配replace
setSearchParams(prev => {
  prev.set('page', 3)
  return prev
}, { replace: true })

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

export default function Page() {
  const [searchParams, setSearchParams] = useSearchParams()
  
  // 读取参数，自动解码
  const name = searchParams.get('name')
  const isLogin = searchParams.get('if_login')

  // 按钮修改参数（保留原有其他参数）
  const updateQuery = () => {
    setSearchParams(prev => {
      prev.set('if_login', 'true')
      prev.set('name', '测试&首页') // 自动编码特殊符号
      return prev
    }, { replace: true })
  }

  // 清空所有参数
  const clearQuery = () => setSearchParams({})

  return (
    <div>
      <p>name参数：{name}</p>
      <button onClick={updateQuery}>设置参数 if_login & name</button>
      <button onClick={clearQuery}>清空所有查询参数</button>
    </div>
  )
}

// 当前地址 ?a=1&b=2
setSearchParams({ c: 3 })
// 结果：?c=3  a、b直接消失！

setSearchParams({ page: 2 })
searchParams.get('page') // "2" 字符串，不是数字

// 方式1：回调delete（推荐，保留其他参数）
setSearchParams(prev => {
  prev.delete('name')
  return prev
})
// 方式2：重新传对象覆盖（会清空其他参数）
setSearchParams({ if_login: 'true' })

const [searchParams] = useSearchParams()
const query = Object.fromEntries(searchParams)
console.log(query.name, query.if_login)