How to add routing on Material UI Icon using v6 router-CodePudding

I have list of contacts, each has edit icon, I want to route to Edit Component on clicking of edit icon, I tried making icon as link component something like this:

<ModeEdit component={Link} to={{`contact/edit/${contact.id}`}} state:{contact} style={{ color: 'blue', marginRight: '10px' }} ></ModeEdit>

Doesn't work

I want to pass pass object through routing to Edit component using functional component

CodePudding user response：

Don't forget for leading '/' in path if it's necessary (here you have relative path):

<Link to={{`contact/edit/${contact.id}`}}>
  <ModeEditIcon style={{ color: 'blue', marginRight: '10px' }} />
</Link>