React 无法使用 Link 将数据从一个类组件传递到另一个类组件

Question

我正在尝试使用 Link 将数据传递到新页面，为此我使用了以下代码。

 <Link
            className="option"
            to={{
              pathname: this.state.pathname,
              state: id
            }}
          >
            <span className="color-primary"> <button style={{ color: "white" }} 
              className="transaction-button"><i className="material-icons" style={{ fontSize: "18px" }}>sync_alt</i> Transaction</button>
            </span>
          </Link>

在路由的页面中，我尝试通过以下代码处理数据。

console.log(this.props)

输出是一个空对象。

{}

两个页面都是类组件

Answer 1

我假设您使用的是react-router。

在您使用<Link>...</Link> 的第一页中，您做的是正确的事情。

此时有两种选择：可以使用函数或类来创建组件。

如果你使用函数

在第二页，要取你传递的数据，你必须导入useLocation：

import { useLocation } from 'react-router';

然后，在函数内部，你必须调用它并从中提取状态：

const location = useLocation();
console.log(location.state);

在location.state 中，您拥有从上一页传递的状态。

如果你使用一个类

在这种情况下，事情会稍微复杂一些，但您可以使用 withRouter 将 location 注入到您的组件 props 中。

所以，首先你需要导入PropsTypes 和withRouter：

import PropTypes from 'prop-types';
import { withRouter } from 'react-router';

那么你必须这样写你的类：

class Child extends React.Component {
    static propTypes = {
        location: PropTypes.object.isRequired,
    };

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

        console.log(location.state);

        return {
           <div> ... </div>
        };
    }
}
export withRouter(Child);

这样在location.state 中你就有了你从上一页传递过来的状态。