Реагируйте на маршрутизатор v4 history.push на тот же маршрут (разные параметры запроса) в функциональном компоненте (используйте Hooks API)

Question

Я пытаюсь закодировать функцию фильтра поиска для таблицы.Я использую React-Router-DOM v4.Когда пользователь нажимает кнопку поиска, я хочу переместить страницу из «/ list» в «list? Search = abc» с помощью props.history.push ().(Я уже использовал RouteComponentProps и withRouter).Но я знаю, что response-router-dom v4 просто меняет URL, пока он не обновляет страницу.Мой коллега использует функцию 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]);