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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您使用的是 `react-native-router-flux`,您可以在跳转到下一个页面时,将参数传递为 `null`。这样,当您回退到上一个页面时,上一个页面的参数就会被清除。以下是一个示例代码: ```jsx import { Actions } from 'react-native-router-flux'; // 跳转到下一个页面并传递参数 Actions.nextPage({ param: 'value' }); // 回退到上一个页面并清除参数 Actions.pop({ refresh: { param: null } }); ``` 在上面的代码中,我们首先使用 `Actions.nextPage()` 跳转到下一个页面并传递参数。然后,我们在回退到上一个页面时使用 `Actions.pop()` 并传递一个 `refresh` 参数。这将触发上一个页面的 `onRefresh` 方法,您可以在其中清除参数。以下是一个示例代码: ```jsx import { Actions } from 'react-native-router-flux'; class PreviousPage extends React.Component { onRefresh() { // 清除参数 this.setState({ param: null }); } render() { const { param } = this.state; return ( <View> <Text>Previous Page</Text> <Text>Param: {param}</Text> </View> ); } } // 将上一个页面注册到 router const RouterComponent = () => ( <Router> <Scene key="previousPage" component={PreviousPage} onRefresh={() => Actions.refresh({ param: null })} /> <Scene key="nextPage" component={NextPage} /> </Router> ); ``` 在上面的代码中,我们在上一个页面的 `onRefresh` 方法中清除了参数。我们还在注册上一个页面时使用了 `onRefresh`,以便在回退时自动清除参数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值