有搜索参数跳转后返回保留搜索参数hooks

63 阅读1分钟
/**
 * 页面跳转,请求参数记录;支持回退查询
 * 跳转时使用locationPush(config: Path, states: any)
 * 上级页面初始化使用locationInit() 获取states信息进行回显
 *
 * 占有词:sesTemp, pushSession_**
 */
import { useHistory, useLocation } from 'react-router-dom';
import _ from 'lodash';


const useHistoryPush = (): any => {
  const history = useHistory();
  const location = useLocation();

  /**
   *
   * @param pushConfigs history.push 参数
   * @param states 要记录的上级数据{Object}
   * @param needTemp 是否需要在新页面获取时间戳信息(会放入state.sesTemp)
   */
  const locationPush = (pushConfigs: any, states: any, needTemp?: boolean) => {
    if (states) {
      const temp = Date.now();
      sessionStorage.setItem(`pushSession_${temp}`, _.isObject(states) ? JSON.stringify(states) : states);
      history.replace(`${location.pathname}${location.search}${location.search ? '&' : '?'}sesTemp=${temp}`);
      history.push(needTemp
        ? _.merge(pushConfigs, { state: { sesTemp: temp } })
        : pushConfigs);
      return;
    }

    history.push(pushConfigs);
  };


  const locationInit = (): any => {
    const temp = location.search?.match(/sesTemp=(\d*)?/)?.[1];
    if (temp) {
      history.replace(`${location.pathname}${location.search?.replace(/sesTemp=\d*(&)?/g, '')}`);
      const res = sessionStorage.getItem(`pushSession_${temp}`);
      sessionStorage.removeItem(`pushSession_${temp}`);
      try {
        return JSON.parse(res || '');
      } catch (e) {
        return res || null;
      }
    }

    return null;
  };

  return {
    locationPush,
    locationInit
  };
};
export default useHistoryPush;