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

Question

我是React的新手，我使用登录和仪表板页面创建了一个简单的应用程序。我已经使用重定向功能成功配置了公共路由和专用路由。但是，当我想要实现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 ，我不想让它看起来像 anchor标签，并在下面的行下显示

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

感谢有人可以帮助您。 预先感谢。

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>

希望有帮助！

Answer 3

您可以使用类似的方法将类附加到NavLink：

<NavLink to="/" className="nav-link-item">
  Dashboard
</NavLink>

然后，将样式附加到此类：

.nav-link-item {
  color: inherit;
  text-decoration: none;
}

.nav-link-item:hover,
.nav-link-item:active,
.nav-link-item:visited {
  color: red;
  text-decoration: none;
}

/* Styling for when the link is active */
.nav-link-item.active {
  color: green;
}