React Router V4 使用 Material UI 在 ListItem 中实现 NavLink

Posted 2023-02-22

【中文标题】React Router V4 使用 Material UI 在 ListItem 中实现 NavLink

【英文标题】：React Router V4 Implement NavLink inside a ListItem using Material UI

【发布时间】：2019-05-13 01:32:49

【问题描述】：

我是 React 新手，我创建了一个带有 Login 和 Dashboard 页面的简单应用程序。我已成功配置我的 公共路线 和 私人路线 与 重定向 功能。但是，当我想实现 material-ui/core 时，事情仍然运行良好，但我无法实现我想要的 UI。

下面是我的 NavBar 的旧实现：

const Navigation = () => 
    return (
        <div>
            <NavLink exact to="/" activeStyle= color: 'red' >Home</NavLink>
            <NavLink to="/about" activeStyle= color: 'red' >About</NavLink>
            <NavLink to="/contact" activeStyle= color: 'red' >Contact</NavLink>
        </div>
    )


export default Navigation

就这么简单，没有样式或类

但由于我想添加一些样式，所以我使用了ma​​terial/ui core，最后在下面做了一个新的：

export const MainNavigation = (
  <div>
    <ListItem button>
      <ListItemIcon>
        <DashboardIcon />
      </ListItemIcon>
      <ListItemText primary="Dashboard" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <ShoppingCartIcon />
      </ListItemIcon>
      <ListItemText primary="Orders" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <PeopleIcon />
      </ListItemIcon>
      <ListItemText primary="Customers" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <BarChartIcon />
      </ListItemIcon>
      <ListItemText primary="Reports" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <LayersIcon />
      </ListItemIcon>
      <ListItemText primary="Integrations" />
    </ListItem>
  </div>
);

现在第一个ListItem 如下所示：

但是当我在下面添加这行代码时：

<ListItemText primary=<NavLink exact to="/">Dashboard</NavLink> />

这是结果：

但我不希望这种情况发生。

我想保留第一个 UI 我不想让它看起来像一个 锚标记，下面有 下划线

如何处理与 react 路由器 NavLink 或 Link 集成的 Material/ui 中的 ListItem 的活动状态？以便我可以放置一些样式或使用活动类材料。

如果有人可以提供帮助，我们将不胜感激。 提前致谢。

【参考方案1】：

使用 ListItem 的组件属性。要获得活动路线样式，请将 NavLink 的 activeClassName 设置为 Mui-selected。

<ListItem button component=NavLink to="/" activeClassName="Mui-selected" exact>
  ...
</ListItem>

【讨论】：

这行得通，但 React 抱怨：“警告：React 无法识别 DOM 元素上的 activeClassName 属性。如果您故意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写activeclassname。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除。”有什么想法吗？

什么版本的反应？什么版本的材料 UI 或反应路由器？在我发布此内容时，我没有收到该错误。

"react": "^17.0.1", "react-router-dom": "^5.2.0", "@material-ui/core": "^4.11.2".

【参考方案2】：

您可以通过将 NavLink 设置为列表项的组件来实现。这是一个对我有用的例子！

<ListItem
  button
  key="Dashboard"
  component=NavLink to="/dashboard"
>
    <ListItemIcon>
        <Dashboard />
    </ListItemIcon>
    <ListItemText primary="Dashboard" />
</ListItem>

希望对你有帮助！

【讨论】：

如果其中一个链接被禁用，如何配置？