用react+typescript实现 浏览器刷新后保存表单搜索组件状态，思路：首先定义一个const defaultData=history.location.query?.search,然后在接口请求的地方实现history,replace({})

可以使用 React Router 中的 `useLocation` 和 `useHistory` 钩子，来获取当前页面的 location 和 history 对象，然后在表单搜索组件中，将搜索条件存储到 URL 参数中，从而实现浏览器刷新后保存表单搜索组件状态的功能。具体实现方法如下：

1. 在表单搜索组件中，使用 `useLocation` 钩子获取当前页面的 location 对象，然后从 URL 参数中获取搜索条件的值，例如：

import { useLocation } from 'react-router-dom';

const SearchForm = () => {
  const location = useLocation();
  const defaultFormData = location.search ? qs.parse(location.search.substring(1)) : {};
  const [formData, setFormData] = useState(defaultFormData);
  ...

2. 在表单搜索组件中，使用 `useHistory` 钩子获取 history 对象，然后在表单提交时，更新 URL 参数中的搜索条件的值，例如：

import { useHistory } from 'react-router-dom';

const SearchForm = () => {
  const location = useLocation();
  const history = useHistory();
  const defaultFormData = location.search ? qs.parse(location.search.substring(1)) : {};
  const [formData, setFormData] = useState(defaultFormData);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const search = qs.stringify(formData);
    history.replace({ search });
    // 发起接口请求
    ...
  };

  ...

通过以上实现，即可实现浏览器刷新后保存表单搜索组件状态的功能。需要注意的是，在使用 `useHistory` 和 `useLocation` 钩子时，需要保证当前组件是被 `Route` 组件包裹的。同时，需要使用 `qs` 库来解析和序列化 URL 参数的值。