如何在 Next.js 中更改路线而不重新渲染？

Question

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

例如，当我单击第 1 页并在巴黎放置类型宾馆时，网址如下所示。

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

为此。我在页面文件夹中创建了一个文件名findstay ，并在组件文件夹内创建了findstay-filter组件。

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

interface IFindstayProps { };

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

export default Findstay;

我解释的所有逻辑都写在FindstayFilter组件内部。

这是渲染FindstayFilter时推送 url 的代码。

 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)));
  }, []);

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

为什么浅选项不起作用？

Answer 1

该shallow选项正在运行。它的目标是不让您的浏览器离开。但它肯定会触发状态更新，从而触发重新渲染。

当然，您有时确实需要它来触发状态更新，以便您可以使用更新的查询参数值。

现在，如何更新 URL 而不触发重新渲染？您使用的是window.history，而不是下一个路由器。

所以，而不是这个：

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

你会这样做：

const newUrl = `/findstay?page=${_page}&per=10&place_type=_placeType&city=_city`

window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, '', newUrl)

它很丑陋，但它按预期工作。这是让您的路线与您的州保持同步的非常好的方法。

我建议你把它变成一个实用函数。