react页面跳转携带参数,返回时能展示跳转之前的数据

需求：带有筛选功能的列表跳转到详情页之后，刷新详情页也能正常显示数据，且返回到列表页后，能记住之前筛选出来的数据并展示。

列表页核心代码

• 页面跳转能携带参数的核心代码为seeDetailFunc函数
• 详情返回到列表，能记住之前筛选出来的数据的核心代码为let localTemp = JSON.parse(localStorage.getItem('storeList'));

class PromotersAgent extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
          inputUserId:"",        
        };
      }

      componentDidMount() {
        const token = localStorage.getItem("token");
        const name = localStorage.getItem("username");
        this.setState({
          token: token,
          name: name,
        });
        let localTemp = JSON.parse(localStorage.getItem('storeList'));
        if (localTemp) {// 有缓存
          this.setState({
            pageNum: localTemp.pageNum,
            searchKeyword: localTemp.searchKeyword, // 店铺名称
          },()=>{
            var jsonParams = {
              token: token,
              userName: name,
              pageNum: this.state.pageNum,
              storeName: this.state.searchKeyword, // 店铺名称
            };
            axios.post(getStoreList, stringify(jsonParams)).then(({ data }) => {
              if (data.status === 200) {
                this.setState({
                  Datas: data.data.result_list,
                  totalData: data.data.totalData,
                });
              } else if (data.status === 400) {
                alert(data.msg);
                this.props.history.push("/login");
              }
            });
          })
    
        }else{// 没有缓存
          var jsonParams = {
            token: token,
            userName: name,
            pageNum: this.state.pageNum,
            storeName: this.state.searchKeyword, // 店铺名称
          };
         
          axios.post(getStoreList, stringify(jsonParams)).then(({ data }) => {
            if (data.status === 200) {
              this.setState({
                Datas: data.data.result_list,
                totalData: data.data.totalData,
              });
            } else if (data.status === 400) {
              alert(data.msg);
              this.props.history.push("/login");
            }
          });
        }
      }



    render() {
        const tba = this.state.Dates.map((item, index) => {
            var list = [];

            const tabs = {
            key: index,
            id:item.id,
    
            operation:<li onClick={() => this.seeDetailFunc(item.orderNo,item)}>
                    <span className="iconfont iconchakanyanjingshishifenxi2"></span>
                </li>,
            };
            return tabs;
        });
        return (
        <Fragment>  
            <div className="TabBox">
                <Table
                    size="small"
                    key={currentPage}
                    columns={this.state.columnsWait}
                    pagination={{ total: +this.state.totalData, defaultCurrent: currentPage,showQuickJumper:true }}
                    rowSelection={rowSelection}
                    dataSource={tba}
                    onChange={this.onPageNum}
                /> 
            </div>
        </Fragment>
        );
    }

    seeDetailFunc(param,item) {
        this.props.history.push({
            pathname: '/zeroOrderDes',
            search:'orderNo=' + param+'',
            state: {eventArray: item, localState: this.state,orderNo:item.orderNo}
        })
    }
}
export default PromotersAgent;

image.png

---

详情页部分代码

• 详情页接收参数的核心代码var path = this.props.location.search;和this.props.location.state.storeId
• 详情也缓存列表页面的筛选条件数据的核心代码
  localStorage.setItem("storeList", JSON.stringify(this.props.location.state.localState));

 var path = this.props.location.search;
    var storeId = '';
   if (this.props.location.state) {
    storeId = this.props.location.state.storeId;
        console.log('AAA---',storeId);
        /*保存A界面列表的参数*/
        if(this.props.location.state.localState!==undefined&&this.props.location.state.localState!==null){
          localStorage.setItem("storeList", JSON.stringify(this.props.location.state.localState));
        }
    }else{
      console.log('BBB');
            // var path = this.props.location.search; //获取默认店铺id
            storeId = path.substring(path.lastIndexOf("=") + 1);
    }

image.png

请移步到我的这篇文章React 跳转页面传参的做法(Link与push)与差别，列举了更多跳转页面传参的做法。