关于react-router返回前一个路由后view re-render的情况

#1

demo请看这里~ demo

我在进入到上面这个demo的A路由页面之后,componentDidMount触发会get请求数据,点击其中一天的天气,会进入另一个路由B展示详情。问题来了,我在那个路由B里点击返回之后又会重新出发路由A里面组件的DidMount重新刷新我的页面。所以这里有什么办法可以让我返回前一个路由时只是单纯的返回而不会刷新我的界面吗。

我之前想过把详情页面路由B当做上面demo页面路由A的子路由,那样切换子路由B的时候A就不会变化,但是感觉这样结构不太好,所以还是想求助一下大家。 :smile:

#2

首先,如果要重新mount组件并且不请求数据,这个数据需要放到组件之外,比如redux里面,才能在这种情况下保留数据。

然后,一种简单的方式是判断如果数据已加载,就不请求新数据。

如果一定要判断点击back才不请求,react-router提供了 props.location,根据action判断就行了。2.0版本结构如下:

{
  $searchBase: [object Object] {
    search: "",
    searchBase: ""
  },
  action: "POP",
  hash: "",
  key: "qzxt7m",
  pathname: "/",
  query: [object Object] { ... },
  search: "",
  state: null
}

POP代表点back或者调用history API返回的。

#3

谢谢解答~(*^▽^)/有思路了,去学习redux啦~ :heart_eyes:

#4

我又来了,有一个新问题,但是还没有实践过。。如果我有一个列表,首次加载时拉取了一些数据存在redux里面,但是这个列表页面可以无限滚动加载,我往下滚动的话,加载了新的数据也放到redux里存储的话,那样我进入另一个路由后返回的话,数据是还在,但是当时页面最后滚动的位置还是之前一样的吗

#5

应该不在。你可以自己实现

#6

业务中使用 react-router v4 时碰到了这个问题,造轮子解决了
增加了两个自定义的生命周期 didCache didRecover