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

【问题标题】：React Router V4 Implement NavLink inside a ListItem using Material UIReact Router V4 使用 Material UI 在 ListItem 中实现 NavLink
【发布时间】：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

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

但由于我想添加一些样式，所以我使用了material/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 的活动状态？以便我可以放置一些样式或使用活动类材料。

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

【问题讨论】：

标签： reactjs list react-router navigation-drawer material-ui

【解决方案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>

希望对你有帮助！

【讨论】：

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