React Router V4使用Material UI在ListItem中实现NavLink [英] React Router V4 Implement NavLink inside a ListItem using Material UI

问题描述

我是React的新手，我使用登录和仪表板页面创建了一个简单的应用程序.我已经使用重定向功能成功配置了公共路由和专用路由.但是，当我想实现 material-ui/core 时，一切仍然很好，但是我无法实现我想要的用户界面.

I am new to React and I created a simple application with Login and Dashboard page. I have successfully configured my Public Routes and Private Routes with Redirect functionalities. However when I want to implement material-ui/core Things are still quite working well but I can't achieve the UI that I want.

这是我下面的 NavBar 的旧实现:

Here is my old implementation of my 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

就像没有样式或类

但是由于我想添加一些样式，所以我使用了 material/ui core ，并最终在下面进行了新的设计:

But since I want to add some styles I used material/ui core and ended up doing the new one below:

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如下所示:

但是当我在下面添加以下代码行时:

But when I add this line of code below:

<ListItemText primary={<NavLink exact to="/">Dashboard</NavLink>} />

这是结果:

但是我不希望这种情况发生.

But I don't want this to happen.

我想保留第一个 UI ，我不想让它看起来像一个 anchor标签，并在下面的行下显示

I want to keep the first UI I dont wan't it to make it look like an anchor tag with a under line below

我还如何处理与React Router NavLink或Link集成的material/ui中ListItem的活动状态?这样我可以放一些样式或使用活动的材料类.

How can I also handle the active state of the ListItem in material/ui integrated with react router NavLink or Link? So that I can put some style or uses the active class of material.

感谢有人可以提供帮助. 预先感谢.

Appreciate if someone could help. Thanks in advance.

推荐答案

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

You can do it by setting the NavLink as the component of the list item. Here is an example that has worked for me!

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

希望有帮助！

这篇关于React Router V4使用Material UI在ListItem中实现NavLink的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！