Reactjs 通过React中的链接将列表传递给另一个组件

我试图通过链接将所选的列表类别传递给新组件。然后在这个新组件中，我要做的就是console.log categorieselected，但现在它返回为undefined。以下是链接：

<Link to={{
      pathname: "/input-data", state: {
      data: categoriesSelected
      }
      }} className="link">
      <Button size="lg" id="continue">
      Continue
      </Button>
      </Link>

继续

下面是我如何尝试将其登录到另一个组件中：

    componentDidMount() {
        const { data } = this.props.location.state
    }

    render() {

        const Category = () => { console.log(this.data); return null};

        return (
            <div>
                <Container className="login text-secondary">
                    <Form className="form text-left">
                        <Col className="dropdown">
                            <FormGroup>
                                <Category />
                            </FormGroup>

                               ...

componentDidMount（）{
const{data}=this.props.location.state
}
render（）{
const Category=（）=>{console.log（this.data）；返回null}；
返回(
...

与其访问

componentDidMount

中的数据，为什么不直接在

中使用道具并将其作为实例“方法”存储在中

例如：

class Component extends React.Component {

    Category = () => {
        console.log(this.props.location.state.data)
        return null
    }

    render() {
        const {Category} = this

        return (
           <Category /> 
        )
    }

}

类组件扩展React.Component{
类别=（）=>{
log（this.props.location.state.data）
返回空
}
render（）{
常量{Category}=此
返回(
)
}
}

如果您尝试在

componentDidMount

中

console.log（this.props.location.state）

它能工作吗？