在 React 组件中读取 props.history.push 中的数据 - Javascript

当我们在 React 应用程序中使用路由时，props.history.push 是一个非常有用的方法，它使我们能够在路由之间切换。但是，如果我们需要在组件中读取 props.history.push 的数据，该怎么办呢？本文将介绍如何在 React 组件中读取 props.history.push 的数据。

1. 使用 withRouter 高阶组件

withRouter 是 React Router 提供的高阶组件，它可以注入 history, location 和 match 这三个属性到组件的 props 中。因此，我们可以使用 withRouter 高阶组件来访问 props.history.push 中的数据。

import React from "react";
import { withRouter } from "react-router-dom";

class MyComponent extends React.Component {
  handleClick = () => {
    const { history } = this.props;
    history.push("/path/to/some/page");
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Push History</button>
      </div>
    );
  }
}

export default withRouter(MyComponent);

在上面的例子中，我们通过 withRouter 包裹了 MyComponent 组件，并在组件中访问了 props.history.push 方法。

2. 使用 props.location

props.history.push 方法将数据存储在 props.location 对象中。因此，我们可以直接从 props.location 中获取数据。

import React from "react";

class MyComponent extends React.Component {
  handleClick = () => {
    const { history } = this.props;
    history.push("/path/to/some/page", { data: "some data" });
  };

  render() {
    const { location } = this.props;
    const { data } = location.state || {};

    return (
      <div>
        <button onClick={this.handleClick}>Push History</button>
        <div>{data}</div>
      </div>
    );
  }
}

export default MyComponent;

在上面的例子中，我们通过 props.location.state 获取了 history.push 存储的数据，并在组件中渲染了它。

3. 使用路由组件

如果我们使用的是路由组件，那么我们可以通过 props.match.params 获取路由参数中的数据。

import React from "react";
import { Route } from "react-router-dom";

class MyComponent extends React.Component {
  render() {
    const { match } = this.props;
    const { data } = match.params;

    return (
      <div>
        <div>{data}</div>
      </div>
    );
  }
}

export default () => (
  <Route
    path="/path/:data"
    render={(props) => <MyComponent {...props} />}
  />
);

在上面的例子中，我们使用了路由组件，并通过 props.match.params 获取了路由参数中的数据，并在组件中渲染了它。

总结：以上三种方式都可以在 React 组件中读取 props.history.push 中的数据。其中，使用 withRouter 高阶组件是相对简单和通用的方法。使用 props.location 是直接的方法，适用于仅需要访问 history.push 中的数据的组件。使用路由组件是更适用于需要访问路由参数的组件。