reactjs - 在不重新加载的情况下更改查询参数 = NextJS 路由器

Question

对于我正在处理的一个项目，我遇到了 nextjs 路由器的问题。我有一个组件，该组件有一个输入字段，用户应该能够在其中输入他们的搜索词。有一个不同的组件应该能够得到这个搜索词并执行搜索。

因为这两个组件没有连接，所以我想在 Input 组件中设置 router 中的 queryParameters，然后在 searchTerm 发生变化时在 search 组件中执行一个函数。

问题在于：searchComponent 接收 nextJS 路由器作为道具，并且只会在这些道具更改时执行我的 useEffect 函数（并且反应知道它们已更改），最重要的是我需要在更新时保持在同一页面上查询参数，但是这个页面的路由是动态的。例如：用户可以在 /search 上添加这种组件组合，也可以在 /lookforitem 上添加。

我尝试在 Input 组件中按以下方式设置 queryParameters：

  function setQueryParams() {
    router.query = {
      ...router.query,
      searchTerm: input.current,
    };
  }

结合 Search 组件中的以下代码：

useEffect(() => {
  console.log('Router has changed');
}, [router]);

问题是这个 useEffect 直到再次呈现搜索组件时才会被调用（我创建了一个将路由器记录到控制台的按钮，它显示了更新的路由器），我认为这是因为 React 还没有意识到路由器道具已更改。

我还尝试通过 router.push 以下列方式设置查询参数：

function setQueryParams() {
  router.push(
    {
      pathname: router.route,
      query: {
        ...router.query,
        searchTerm: input.current,
      },
    },
    undefined,
    { shallow: true }
  );
}

然而，这也带来了一系列问题。首先，它会导致页面刷新，这是我不想要的。最重要的是，它会将 url 更改为例如：/search?searchTerm=Hello，这意味着如果我输入不同的输入并提交，它将堆叠生成下一个 url，例如：&searchterm=hello?searchterm=goodbye。

我想要一种在不刷新页面的情况下更新查询参数的方法，同时还通知使用路由器的其他组件查询参数已更新。我所做的所有搜索似乎都特定于路由到不同的页面或路由到预定义的页面。

任何帮助将不胜感激。

标签： reactjsroutesnext.js