如何使用 v6 在点击 Material UI 的 Listitem 时传递道具

Question

我的用例是我有一个联系人列表，我使用材料 UI listItem 来创建列表，我通过路由将联系人对象传递到另一个组件，当我使用 useLocation 挂钩检查时，我的状态为空，我是使用 v6 路由器

代码：

 <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>

Answer 1

在 react-router-dom 版本 6 中，state 现在是顶级道具，而不是 to 道具对象上的属性。

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