react--列表携带搜索条件到详情，详情回到列表要回显之前的搜索条件，然后刷新后搜索条件重置初始状态

操作：

（1）：在接诊记录列表页有搜索条件如姓名手机号，接诊时间和接诊类型。

（2）：输入搜索查询条件后，点击进去详情页。

（3）：在详情页点击返回列表按钮。

要求：

在列表页还回显跳转详情页时的搜索条件，且刷新页面后搜索条件重置为初始状态。

页面展示：

（1）列表页面初始状态。

 

 

 

 

 

 

 

 （2）：增加搜索条件点击查询--点击详情。

 

 

 （3）：在详情页点击返回按钮，回到详情页。

 

 

（4）：返回页面，搜索条件回显。

 

 

 

 

核心代码：

1:详情页跳转，查询条件放在路由location的state里面。

  // 跳转到详情方法
  JumpToDetail = (record) => {
    const { form } = this.props;
    const formValue = form.getFieldsValue(['accept_date', 'input_data', 'accept_type']); // form表单获取搜索字段
    hashHistory.push({
      pathname: `/reception/detail/${record.trea_id}/${record.visi_id}`,
      state: formValue
    });
  }

2点击详情页返回按钮：

  // 返回列表页
  handleBackToDetail = (e) => {
    const { location: { state } } = this.props;
    hashHistory.push({
      pathname: 'reception/main', // 列表页地址
      state, // 列表页的state再带回去
    });
  }

 

 

3：列表页设置搜索条件值和刷新页面的处理

  componentDidMount() {
    const { location: { state = {} }, form } = this.props;
    const { accept_date, ...rest } = state;
    let accept_start_date = null;
    let accept_end_date = null;
    if (accept_date) {
      accept_start_date = moment(accept_date[0]);
      accept_end_date = moment(accept_date[1]);
    } else {
      accept_start_date = moment();
      accept_end_date = moment();
    }
    rest.accept_date = [accept_start_date, accept_end_date];
    // 即将离开当前页面（刷新或关闭）时触发，路由跳转不触发该方法
    window.onbeforeunload = () => {
      // 清除localtion的state，是会被自动存在sessionStorage里面的，找到相应的props.location.key,移除相应的数据
      sessionStorage.removeItem(`@@History/${this.props.location.key}`);
    };
    // 表单设置用户之前的搜索条件
    form.setFieldsValue({ ...rest });
    // 请求数据
    this.handleSearchList();
  }

4:组件卸载移除onbeforeunload方法：

  componentWillUnmount() {
    window.onbeforeunload = null;
  }

然后去测试了下，完全可行。

备注：hash路由跳转页面是不会重载的，但是组件会加载，不要把组件加载和页面重载搞混淆。