React项目中如何隐藏Material UI底部导航栏点击时的URL弹窗？

遇到这个问题挺常见的——直接把Link作为BottomNavigationAction的component属性时，它会渲染成原生的<a>标签，浏览器会默认弹出链接的URL提示。这里有几个实用的解决办法：

方法1：用useNavigate手动处理导航（推荐） #

放弃直接传入Link作为component，改用react-router-dom的useNavigate钩子在点击事件里处理页面跳转。这样不会生成原生<a>标签，自然也就不会触发浏览器的URL弹窗了。

代码示例：

import { useNavigate } from 'react-router-dom';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';

function MyBottomNav() {
  const navigate = useNavigate();

  return (
    <BottomNavigation>
      <BottomNavigationAction
        label="Dashboard"
        onClick={() => navigate('/main/dashboard')}
        // 这里可以保留你的图标、选中状态等其他属性
      />
      {/* 其他底部导航项 */}
    </BottomNavigation>
  );
}

方法2：自定义无提示的Link组件（备选） #

如果你还是想保留Link组件的使用，可以封装一个去掉默认提示的自定义Link，通过清空title属性来抑制浏览器的URL弹窗：

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

// 自定义一个不显示标题提示的Link组件
const NoTooltipLink = ({ to, children, ...props }) => (
  <Link to={to} {...props} title="" style={{ textDecoration: 'none' }}>
    {children}
  </Link>
);

// 在BottomNavigationAction中使用这个自定义组件
<BottomNavigationAction
  label="Dashboard"
  component={NoTooltipLink}
  to="/main/dashboard"
/>

不过这个方法的兼容性稍差，部分浏览器可能仍然会显示提示，所以更推荐第一种方案。

总结下来，最稳妥的方式是用useNavigate手动控制跳转，完全避开原生<a>标签的默认行为，从根源上解决URL弹窗的问题。

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