javascript - 如何查看 React Router v6 中的查询字符串是否发生变化？

Question

我有一个带有下拉列表的表单，当我选择下拉列表时，我将值推送到查询字符串上。当第一次点击带有该查询字符串的 url 时，它将查询字符串参数存储到状态中，然后使用它来填充下拉列表。这一切都按预期工作。我的问题是触发表单以在同一页面上查看查询字符串的更改。
如果我已经在页面上但是然后单击 react 路由器链接到同一页面但使用不同的查询字符串参数它不会捕获/看到它已更改。我想知道如何查看查询字符串的更改，或者是否有更好的方法来处理这个问题。
我发现您可以收听 React-Router 打算在后台使用的历史对象，但我在这方面收效甚微，我再次不确定这是否是正确的方法 https://github.com/ReactTraining/history/blob/master/docs/getting-started.md
我尝试将以下内容添加到页面中，但是当我更改 url 的查询字符串(又名搜索)时，监听器似乎永远不会触发。想知道我错过了什么吗？

  useEffect(() => {
    // Listen for changes to the current location.
    console.info("wiring up history listener");
    let unlisten = history.listen(({ location, action }) => {
      console.info("HISTORY CHANGED", location.search);
      console.log(action, location.pathname, location.state);
      // Plan was to update my state here if needed
    });

    return unlisten;
  }, []);

使用 react-router-dom v6。

Answer 1

如果你想监听路径查询字符串参数的变化，你需要从 location“监听”它们的变化。目的。使用 useLocation Hook 获取 location目的。location

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

使用效果 Hook 监听变化。

const { search } = useLocation();

useEffect(() => {
  // search query string changed
}, [search]);