将路由器 v4 history.push 反应到功能组件中的相同路由（不同的查询参数）（使用 Hooks API）

Question

我正在尝试为 table 编写搜索过滤器功能代码。我正在使用 react-router-dom v4。当用户单击搜索按钮时，我想通过 props.history.push() 将页面从“/list”导航到 "list?search=abc"。（我已经使用了 RouteComponentProps 和 withRouter）。但我知道 react-router-dom v4 只是更改 url 而它不会刷新页面。我的同事在 class 组件中使用函数 componentWillReceiveProps 来检测查询参数的变化。（现在该函数称为 getDerivedStateFromProps）

componentWillReceiveProps(nextProps) {
   console.log("next Props");
   if (nextProps.location.search !== this.props.location.search) {
     let parsed = queryString.parse(nextProps.location.
     this.loadData(parsed);
   }

我必须在功能组件中使用 React Hook（使用 Typescript）。我尝试了很多方法，但没有用。你知道解决这个问题的方法吗？非常感谢。

Answer 1

我找到了我的解决方案，我使用 useEffect 来检测查询参数搜索更改

useEffect(() => { 
  console.log(`use effect set state search`);
  const searchParams = new URLSearchParams(props.location.search); console.log(search params: ${searchParams}); 
  const search = searchParams.get("search") || "";
  console.log(search: ${search}); setState({ ...state, search: search }); 
  loadData(search); 
}, [props.location.search]);

将路由器 v4 history.push 反应到功能组件中的相同路由（不同的查询参数）（使用 Hooks API）

React router v4 history.push to the same route (different query params) in Functional Component (use Hooks API)

typescript

reactjs

react-router-v4

react-hooks