猿问

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,但很遗憾行不通...
这里没辙了,求救各位大神,来帮帮忙。。。
总结下问题就是:点击返回时,如何让上一个页面不更新?
守候你守候我
浏览 7577回答 2
2回答

慕哥9229398

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

桃花长相依

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

相关分类

JavaScript
我要回答