react-router 3.0.5中browserHistory.push传递state失效问题求助

我来帮你解决react-router 3.0.5中browserHistory.push传递state不生效的问题。咱们先明确react-router 3.x中state传递的正确逻辑，再结合你的代码分析问题所在。

1. 正确的state获取位置 #

在react-router 3.x里，通过browserHistory.push(path, state)传递的state，不会直接出现在组件的顶层props中，而是被挂载到this.props.location.state对象里。你可能是在错误的位置查找这个state了。

比如，对应/payment路由的Payment组件里，应该这样获取传递的参数：

class Payment extends React.Component {
  componentDidMount() {
    // 这里就能拿到你传递的{ level: 'gold' }
    console.log('路由传递的state:', this.props.location.state);
  }

  render() {
    // 加个空值判断，避免直接解构报错
    const { level } = this.props.location.state || {};
    return <div>当前会员等级：{level}</div>;
  }
}

2. 确保组件能拿到location props #

如果你的Payment组件不是直接由<Route>标签渲染（比如它是某个父组件的子组件，没有被路由直接关联），那么它不会自动获得location props。这时候需要用react-router提供的withRouter高阶组件来包裹它：

import { withRouter } from 'react-router';

class Payment extends React.Component {
  // ...组件逻辑
}

// 用withRouter包裹后，组件就能拿到location、history等路由相关props
export default withRouter(Payment);

3. 检查路由配置的正确性 #

确保你的路由配置使用的是browserHistory，并且/payment的路由定义正确，比如：

import { Router, Route, browserHistory } from 'react-router';

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="/payment" component={Payment} />
      {/* 其他路由配置 */}
    </Route>
  </Router>,
  document.getElementById('root')
);

4. 调试小技巧 #

如果还是拿不到state，可以在Payment组件的render方法里打印整个this.props，确认是否存在location对象：

render() {
  console.log('组件props:', this.props);
  // ...其他渲染逻辑
}

如果输出里没有location，那大概率是组件没有被路由直接渲染，或者没使用withRouter包裹。

额外注意 #

路由传递的state是存在内存中的，如果用户直接刷新/payment页面，state会丢失。如果需要持久化这个参数，你可以考虑把它作为URL的查询参数（比如/payment?level=gold），然后通过this.props.location.query.level获取，这取决于你的业务需求。

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