回退上个页面
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}`,
});
}
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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)