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路由跳轉頁面是不會重載的，但是組件會加載，不要把組件加載和頁面重載搞混淆。