如何在MUI <Tab>组件中使用react-router实现路由跳转？

直接将Link嵌套在Tab外层无效的原因是：Tab本身是按钮元素，点击时的默认事件会干扰Link的跳转逻辑。下面提供两种可行的解决方案：

方案一：将Tab渲染为Link组件（推荐） #

利用MUI Tab的component属性，直接将Tab指定为React Router的Link组件，同时传递路由地址：

<Tab
  component={Link}
  to='/amar'
  label="آمار"
  icon={<EqualizerRounded sx={{ color: purple["400"] }} />}
  iconPosition="start"
  {...tabProps(1)}
  sx={{
    mt: 2,
    "&.MuiTab-root": {
      minHeight: 40,
    },
  }}
/>

这种方式既能保留MUI Tab的所有样式和交互（选中状态、hover效果等），又能正常触发路由跳转并更新URL。

方案二：手动在点击事件中触发路由跳转 #

如果需要在点击Tab时同时处理其他逻辑（比如更新Tab选中状态），可以结合useNavigate钩子手动实现跳转：

import { useNavigate } from 'react-router-dom';

const SidebarInfo = ({handleChange,value}) => {
  const navigate = useNavigate();
  
  function tabProps(index) {
    return {
      id: `simple-tab-${index}`,
      "aria-controls": `simple-tabpanel-${index}`,
    };
  }

  const handleTabClick = () => {
    handleChange(1); // 更新Tab选中状态
    navigate('/amar'); // 触发路由跳转
  }

  return (
    // 其他代码...
    <Tab
      label="آمار"
      icon={<EqualizerRounded sx={{ color: purple["400"] }} />}
      iconPosition="start"
      {...tabProps(1)}
      onClick={handleTabClick}
      sx={{
        mt: 2,
        "&.MuiTab-root": {
          minHeight: 40,
        },
      }}
    />
    // 其他代码...
  )
}

注意事项 #

• 确保你的SidebarInfo组件处于BrowserRouter（或React Router提供的其他路由容器）的包裹范围内，否则React Router的相关API无法生效。
• 确认路由配置中已正确定义/amar对应的页面组件。

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