How to pass props while routing on click of Listitem of Material UI using v6-CodePudding

My use case is I have a list of contacts, I have used material UI listItem for creating list, I am passing contact object through route to another component, I am getting state as null when I checked using useLocation hook, I am using v6 router

Code:

 <List className={classes.contactList}>
                {
                 props.contacts && props.contacts.map(contact => (
                     <ListItem component={Link} to={{pathname: `/contact/${contact.id}`, state:{ contact: props.contacts }}} divider={true} key={contact.id}>
                         <ListItemAvatar>
                             <Avatar>
                                <PersonPinCircleRounded></PersonPinCircleRounded>
                             </Avatar>
                         </ListItemAvatar>
                         <ListItemText primary={contact.name} secondary={contact.email}></ListItemText>
                         <DeleteOutline style={{ color: 'red'}} onClick={() => deleteHandler(contact.id)}></DeleteOutline>
                     </ListItem>

                 ))
                }
            </List>

CodePudding user response：

In react-router-dom version 6 state is now a top-level prop, not a property on the to prop object.

<ListItem
  component={Link}
  to={`/contact/${contact.id}`} 
  state={{ contact: props.contacts }}
  divider={true}
  key={contact.id}
>
  ...
</ListItem>