React Router 4：如何通过history.push传递刷新不丢失的state？

嘿，很高兴你已经搞定了Link组件传state的操作！其实用history.push实现同样的效果（包括刷新后state不丢失），方法和Link组件几乎一致，我给你理清楚：

核心用法 #

你只需要把history.push的参数从字符串改成一个包含pathname和state的对象，就像这样：

// 假设myVar是你要传递的变量
this.props.history.push({
  pathname: '/myPath',
  state: { foo: myVar }
});

为什么刷新后state还在？ #

这和Link组件的原理一样——React Router底层调用了浏览器的history.pushState API，这个API会把state存储在浏览器的历史记录栈里。当你刷新页面时，浏览器会保留这条历史记录的state信息，所以你依然能通过this.props.location.state.foo拿到传递的值。

几个需要注意的点 #

• 别直接传字符串路径：如果写this.props.history.push("/myPath")，是没法携带state的，必须传对象格式的参数
• 确保组件能拿到history prop：如果你的组件不是直接被Route渲染的路由组件，记得用withRouter高阶组件包裹它，这样才能获取到history、location这些props
• 兜底处理：如果用户是直接在地址栏输入/myPath或者通过书签打开页面，这时候location.state会是undefined，所以建议访问的时候加个兜底：

  const fooValue = this.props.location.state?.foo || '默认值';
  

内容的提问来源于stack exchange，提问作者ace2case