Reactjs 如何在不在Next.js中重新渲染的情况下更改路由？

我创建了一个过滤器，当我单击“确认”按钮时，它会更改url

例如，当我单击第1页和place type guesthouse in paris时，url如下所示

http://localhost3000/findstay?page=1&per=10&place_type=guest_house&city=paris

现在我想更改url更改时的结果。假设当我像下面这样手动更改查询参数时，过滤器也应该更改

http://localhost3000/findstay?page=1&per=10&place_type=hotel&city=newYork

为了做到这一点。我在pages文件夹中创建了一个文件名findstay，并在components文件夹中创建了findstay筛选器组件

import React from "react";
import FindstayFilter from "@/components/findstay/findstay-filter";

interface IFindstayProps { };

const Findstay: React.FC<IFindstayProps> = () => {
  return <FindstayFilter />;
};

export default Findstay;

正如您所看到的，我使用了{shallow:true}选项，url并没有改变，只有查询参数改变了。然而，当我手动更改其中一个查询（city=paris->city=newYork）时，组件会重新呈现并重置我在组件第一次呈现时推送的查询参数

为什么浅层选择不起作用

 useEffect(() => {
    const { city, page, per, placeType } = query;
    const _page = parseInt(page || 1 as any);
    const _city = city || state.cityState; // paris
    const _placeType = placeType || "";

    router.push({
      pathname: `/findstay`,
      query: {
        page: _page,
        per: 10,
        plage_type: _placeType,
        city: _city,
      }
    }, undefined,
      { shallow: true })

    const initialRender = {
      page: _page,
      placeType: _placeType,
      city: _city,
    }
    
    searchAvailableBookingDays(initialRender).then(res => res.json().then(value => setData(value)));
  }, []);