如何结合Material-UI Link与React Router Dom实现无刷新导航并保留MUI样式？

你搞反了组件的嵌套关系，正确的做法是用Material-UI的Link作为外层组件，把react-router-dom的Link传给它的component属性，这样既能保留MUI Link的完整样式，又能利用react-router的无刷新导航能力。

修正后的代码 #

import { Link as MuiLink } from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';

<MuiLink component={RouterLink} to={`/products/${id}`}>
  {name}
</MuiLink>

为什么原来的写法不行？ #

你之前的代码是让react-router-dom的Link去渲染MUI的Link，但react-router的Link本身是无样式的基础导航组件，它的component属性只是指定要渲染的元素/组件，并不会继承MUI Link的样式逻辑。而MUI的Link组件设计时就支持通过component属性替换底层的导航载体，同时会自动传递to这类路由相关的props给底层组件，完美适配react-router的需求。

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