react-router-dom 中的 useLocation 钩子如何工作？

Question

我有一个父组件，它呈现两个子组件。父级使用 useLocation 从 location.search 读取查询参数。孩子们有逻辑向 url 添加一些查询参数。所以一旦一个孩子完成了它的渲染，它会在 url 中添加一个查询参数，但是父级中的 useLocation 的值只有来自第二个孩子的查询参数。第一个孩子所做的更新似乎已被覆盖。

const Parent = () => {
  const location = useLocation();

  useEffect(() => {
    console.log(location.search)
  }, [location.search]);
  
  return (
    <div>
      <Child1 />
      <Child2 />
    </div>
  )
}
const Child1 = () => {
  const {search} = useLocation();
  const {push} = useHistory();
  useEffect(() => {
    // modify query parameter here
    const query = queryParams.parse(search);
    query.lang = 'en';
    push({
      search: queryParams.stringify(query)
    });
  }, [])

  return (<div>Child1</div>)
}
const Child2 = () => {
  const {search} = useLocation();
  const {push} = useHistory();
  useEffect(() => {
    // modify query parameter here
    const query = queryParams.parse(search);
    query.q = 'sample';
    push({
      search: queryParams.stringify(query)
    });
  }, [])

  return (<div>Child2</div>)
}

我希望第一个孩子将 url 更新为 ?lang=en，第二个孩子将其更新为 ?lang=en&q=sample。但是发生的情况是第一个孩子将其更新为?lang=en，第二个孩子将其更新为?q=sample。即使他们都使用 useLocation 钩子，他们也不知道彼此的变化。并且父母总是只有第二个孩子的更新。 这里有什么错误？另外，有没有推荐的方法来做这样的事情？对我有用的解决方案是在孩子的 useEffect 中使用window.location.search，这样当第二个孩子正在渲染时，它就会知道第一个孩子所做的 URL 更改。 useLocation 挂钩未检测到此更改。我想真正了解这个钩子的工作原理。任何帮助表示赞赏。谢谢:)

Answer 1

这是我要做的：

我有这些进口：

import { useLocation, useHistory } from "react-router-dom";
import queryString from "query-string";

Child

const Child = () => {
  const { search, pathname } = useLocation();
  const { push } = useHistory();

  // assume you want to add `lang` to query param
  useEffect(() => {
    const query = queryString.parse(search);
    query.lang = "en";

    push({ pathname, search: queryString.stringify(query) });
  }, [search]);

  return <div>Child</div>;
};

Parent

const Parent = () => {
  const { search, pathname } = useLocation();

  useEffect(() => {
    const query = queryString.parse(search);
    console.log(query.lang);
  }, [search]);

  return (
    <div>
      <Child />
    </div>
  );
};