如何在使用 v6 单击 Material UI 的 Listitem 时传递道具 [英] How to pass props while routing on click of Listitem of Material UI using v6

问题描述

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

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

代码:

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

推荐答案

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

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>

这篇关于如何在使用 v6 单击 Material UI 的 Listitem 时传递道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！