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

我是 React 新手，我创建了一个简单的应用程序Login and 仪表板页。我已经成功配置了我的公共路线 and 私人路线 with Redirect功能。但是当我想实施时材料-ui/核心 https://material-ui.com/事情仍然进展顺利，但我无法实现UI我想要的。

这是我的旧实现NavBar below:

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

就这么简单，没有styling or classes

但因为我想添加一些styles I used 材料/用户界面核心并最终做了下面的新的：

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我不想让它看起来像锚标签 with a 下面划线

我也该如何处理活跃状态 of the ListItem在与 React Router 集成的 Material/UI 中NavLink or Link？这样我就可以放置一些样式或使用活动类的材料。

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

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

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

希望能帮助到你！