Componente principal (componente UserList):
const UsersList = (props) => { const removeCandidateById = (id) => { props.removeCandidateDetails(id); } const RenderUsersList = props.CandidateDetails.map((userDetails) => { return ( <UserCard userDetails={userDetails} removeUser={removeCandidateById } key={userDetails.id}/> ) }) Desde UserCard Component me gustaría pasar los datos de accesorios a otro componente secundario a través del objeto de state de Link como state: { userDetails: this.props.userDetails } , pero siempre está indefinido en el gran componente secundario que está configurado en la ruta /userDetail .
También lo intenté con el componente funcional. A través de Link no puedo obtener la solución para esto.
Componente secundario (componente de tarjeta de usuario):
class UserCard extends React.Component { constructor(props) { super(props); const { id, name, age, occupation, phone, imgUrL } = props.userDetails; } render() { return ( <Col className="col col-lg-2 mb-3 mt-4"> <div className="card"> <div className="card-body"> <h5 className="card-title"> {this.name}</h5> <Link to={{ pathname: `/userDetail/${this.id}`, state: { userDetails: this.props.userDetails }, }} > <img className="img" src={avatar} style={this.imgStyle} alt="avatar" /> </Link> </div> </div> </Col> ); } } export default UserCard;Como dijiste, tu versión de react-router-dom es 6.3.0 . En la nueva versión, configura el estado de Link de manera diferente. Necesitas pasarlo al apoyo state .
<Link to={{ pathname: `/userDetail/${this.id}`, }} state={{ userDetails: this.props.userDetails }} > <img className="img" src={avatar} style={this.imgStyle} alt="avatar" /> </Link> Ahora, para obtener el acceso, puede usar el useLocation de react-router-dom.
const { state } = useLocation(); // you have two ways to access userDetails const { userDetails } = state // 1 const userDetails = state.userDetails // 2