Next.js 13使用next-usequerystate刷新页面后URL状态丢失问题求助

大家好，我在Next.js 13项目里使用next-usequerystate库时遇到了一个头疼的问题——刷新页面后URL里的查询参数会丢失。

具体现象是：

• 操作后正常的URL是 localhost:3000/?page=1&genres=tree
• 但刷新页面后，URL直接变成了 localhost:3000/，所有查询参数都消失了
• 奇怪的是，我用console.log(page)和console.log(genres)打印组件状态时，能正常看到对应的数据

我猜测问题出在Next.js 13的服务端组件渲染机制上：服务端组件先初始化了URL状态，等我的客户端组件（已经标记了'use client'）拿到状态时，URL已经被重置了？

下面是我的组件代码：

'use client'

import React from 'react'

import {
  useQueryState,
  parseAsArrayOf,
  parseAsString,
  parseAsInteger,
} from 'next-usequerystate'

import Filters from './Filters'
import ListItem from './ListItem'

const ListProvider = () => {

  const [genres, setGenres] = useQueryState(
    'genres',
    parseAsArrayOf(parseAsString).withDefault([])
  )

  const [pageIndex, setPageIndex] = useQueryState(
    'page',
    parseAsInteger.withDefault(1)
  )

  return (
    <>
      <Filters genres={genres} setGenres={setGenres} />
      <ListItem
        genresFilters={genres}
        setGenres={setGenres}
        pageIndex={pageIndex}
        setPageIndex={setPageIndex}
      />
    </>
  )
}

export default ListProvider

我试过用useEffect强制同步状态到URL，虽然能解决问题，但总觉得不是最优方案：

useEffect(() => {
  setGenres(genres)
  setPageIndex(pageIndex)
}, [])

有没有同学遇到过同样的问题？能不能给我一些更合理的解决思路或者方案？

备注：内容来源于stack exchange，提问作者Valentino Fabris Valenti