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

Question

我是React的新手，并且使用Login和Dashboard页面创建了一个简单的应用程序。我已经使用重定向功能成功配置了我的公共路由和私有路由。但是，当我想实现material-ui / core时， Things仍然可以很好地工作，但是我无法实现所需的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核心，并最终在下面进行了新的样式：

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 router 或集成的in material / ui 的活动状态？这样我就可以放一些样式或使用活动的材料类。ListItemNavLinkLink

感谢有人可以帮忙。提前致谢。

Answer 1

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

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

Answer 2

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

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

希望能帮助到你！