如何通过history.push传递参数?

在React应用程序中，我们通常使用react-router来管理路由和页面跳转。当我们需要将一些参数传递给目标页面时，我们可以使用history.push()方法来进行页面的跳转并传递参数。

1. 传递参数

我们可以使用history.push()方法来进行页面跳转，并传递一个包含参数信息的对象作为第二个参数，例如：

history.push('/my-page', { id: 123 });

在上述代码中，我们通过history.push()方法跳转到了/my-page页面，并传递了一个包含id为123的参数信息的对象。

2. 接收参数

我们可以在/my-page页面的组件中通过this.props.location.state来获取传递过来的参数信息，例如：

class MyPage extends React.Component {
  render() {
    const { id } = this.props.location.state;
    return <div>{id}</div>;
  }
}

在上述代码中，我们通过this.props.location.state来获取传递过来的参数信息，并将其中的id显示在页面中。

3. 页面刷新

在使用history.push()方法传递参数后，如果我们进行页面的刷新，那么传递的参数将会丢失。如果需要在页面刷新后仍然保留参数信息，我们可以将参数信息保存在localStorage中，例如：

history.push('/my-page');
localStorage.setItem('my-page-data', JSON.stringify({ id: 123 }));

在/my-page页面的组件中，我们可以在componentDidMount()生命周期方法中获取保存在localStorage中的参数信息，例如：

class MyPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { id: null };
  }

  componentDidMount() {
    const data = JSON.parse(localStorage.getItem('my-page-data'));
    this.setState({ id: data.id });
  }

  render() {
    return <div>{this.state.id}</div>;
  }
}

在上述代码中，我们在componentDidMount()生命周期方法中获取保存在localStorage中的参数信息，并将其中的id保存在组件的状态中进行显示。

4. 总结

通过history.push()方法可以很方便地进行页面跳转并传递参数。通过this.props.location.state可以在目标页面的组件中获取传递过来的参数信息。如果需要在页面刷新后仍然保留参数信息，我们可以将参数信息保存在localStorage中。