操作：

（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路由跳转页面是不会重载的，但是组件会加载，不要把组件加载和页面重载搞混淆。