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

时间:2017-11-15 18:43:36

标签: reactjs router

我有一个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'

1 个答案:

答案 0 :(得分:0)

你对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>