react-router点击返回上一页,如何不让上一个页面重新加载?

大致代码如下(ps:使用的react-router4):

A页面传参给B页面

this.props.history.push({
    pathname:'/B',
    state:{
        param1:'Hello'
    }
})

B页面接收参数:

this.props.location.state.param1 //Hello

但是!!!!-->>如果从B页面C页面,在C页面点击返回B页面时,A传给B的参数就会获取不到导致报错。

目前的解决方案是把参数存到localStorage里,但个人觉得这是规避问题 并没有解决问题,如果B页面是一个复杂的表单页,从C返回到B时,表单数据就全不见了。。。如果把这些数据全放到localStorage,多恶心啊?。

我也尝试通过组件的生命周期来阻止表单update,但很遗憾行不通...

这里没辙了,求救各位大神,来帮帮忙。。。

总结下问题就是:点击返回时,如何让上一个页面不更新

阅读 13k
2 个回答

如果需要保存状态, 首先应该考虑的不是阻止组件更新来保留组件内state, 建议将参数保存到单独的状态树中(如Redux)或者放在父组件中。

其实我觉得楼上说的用redux存储参数是一个很好的办法,但是redux如果不结合redux-persist,或者不把状态存起来,刷新后状态还是会丢失,本质上还是存储到本地。其实你可以只把A到B的参数到localStorage里,每次进入B页面,获取这个参数,然后重新请求数据,无论是A进入B还是C进入B,都重新请求。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏