React回退上个页面及跳转下个页面

回退上个页面

React 不保存数据

this.props.history.goBack();

浏览器原生

window.history.back();

React-Router、Redux 保存短数据
数据存储在location的query里，就是URL的问号后面的参数列表，同时在请求数据的 actionCreator 里，既要向服务器发送 query 里对应的请求参数，也要在返回的 action 里包含 query 的数据

在详情页通过 react-redux 访问相应的 reducer 的 query（通过 action 传递过来的），读取之前的数据，渲染返回按钮时把参数加到 URL 路径后面当成参数即可

这样做既可以在返回时保留数据，又可以将数据固化到 URL 里，筛选条件，分页参数可以这样做

localStorage 保存长数据
定时在localStorage里存储数据，跳转回来后清空

跳转下个页面

context跳转
bug：带变动参跳转时刷新页面后页面崩溃

//发送
stuFun = record => {
  this.context.router.history.push({
    pathname: `/路由地址`,
    search:`name=${this.state.name}&id=${record.id}`, //可选
  });
}

//utils.js
export const paramsFromSearch = str => {
  str = str.substr(1);
  let arr = str.split("&");
  let params = {};
  for (let i = 0; i < arr.length; i++) {
    let num = arr[i].indexOf("=");
    if (num > 0) {
      let name = arr[i].substring(0, num);
      let value = arr[i].substr(num + 1);
      params[name] = value;
    }
  }
  return params;
};

//接收
getStu = () => {
  let params = utils.paramsFromSearch(
    this.context.router.history.location.search
  );
  this.setState({
    stuName: params.name,
    stuId: parmas.id
  });
}

sessionStorage
刷新页面后页面依然存在
详见Window.sessionStorage存储

引用

https://segmentfault.com/q/1010000006855061