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

Question

我是 React 新手，我创建了一个带有登录和仪表板页面的简单应用程序。我已成功配置具有重定向功能的公共(public)路由和私有(private)路由。但是当我想实现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，我不希望它看起来像一个 anchor 标记，下面有一条下划线

我如何处理与React路由器NavLink或Link<集成的material/ui中ListItem的事件状态/?这样我就可以添加一些样式或使用活跃的 Material 类。

感谢有人可以提供帮助。提前致谢。

Answer 1

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

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

希望对你有帮助!