Question

我有一个Navlink元素如下：

  <NavLink isActive={this.isActiveFunc.bind(this)} className={classes.subLink} to={{ pathname: "/admin/users" }}>
       <ListItem button className={classes.nested}>
           <ListItemText inset primary="Users" />
       </ListItem>
  </NavLink>

当此链接处于活动状态时，我希望ListItemText的样式不同。为此，我尝试应用以下逻辑

 isActiveFunc = (match, location) => {
    this.setState({activePath: match.path});
    return match
  };

如果activePath状态与to路径匹配，我可以设置样式。但是，这会产生错误：

TypeError：无法读取null
的属性'path'

Answer 1

你对ListItemText的样式有多少控制？如果它是活动的，你可以传递prop或className吗？：

var mapcode = "042";
mapcode = parseInt(mapcode);
console.log(0 + mapcode.toString());

或者：

<NavLink className={classes.subLink} to={{ pathname: "/admin/users" }}>
   <ListItem button className={classes.nested}>
       <ListItemText inset primary="Users" passDownAClassName={props.match.path == "/admin/users" ? 'active-class' : 'inactive-class'} />
   </ListItem>
</NavLink>

React Router v4中基于活动路由的样式链接

1 个答案: