如何将Material UI Chip组件与React Router Link结合使用？

直接通过 component 属性将 React Router 的 <Link> 组件传入 Chip 即可，同时传递 to 属性指定跳转路径，具体实现如下：

1. 导入所需组件：

import Chip from '@mui/material/Chip';
import { Link } from 'react-router-dom';

2. 配置 Chip 为路由跳转链接：

<Chip
  component={Link}
  to="/target-page"
  clickable
  label="点击跳转"
  // 可额外传递 Link 的其他属性，比如 replace、state 等
  replace
  state={{ extraData: '自定义内容' }}
/>

如果使用 Material UI v5，也可以通过 slotProps 配置（上述方式更直接）：

<Chip
  clickable
  label="点击跳转"
  slotProps={{
    root: {
      component: Link,
      to: '/target-page'
    }
  }}
/>

原理是 Material UI 组件会将 component 指定的组件作为根元素渲染，并自动转发相关 props（如路由跳转的 to、页面状态 state 等），既保留 Chip 的样式与交互，又能实现 React Router 的路由跳转功能。

内容的提问来源于stack exchange，提问作者Piotrek