怎么在react的jsx中使用activeClassName改变上层或者其他标签的class呢？

Question

1里的li标签class使用active可以正常显示样式但是把li标签替换成NavLink无效，
直接在NavLink里设置样式（图中2的形式）只能改变a标签（转换成html后的a标签）的class而不是li标签，所以效果也不能实现。

我想根据路由比如to=“/”这个地址来让li标签里的className变成active。怎么才能做到呢？css里实在有些复杂，直接去改css不知道怎么改，有没有react里可以实现的方法，或者能做到的思路？
非常感谢大佬们。

Answer 1

className={{active: this.props.history.location.href === '/'}}

Answer 2

className={this.props.history.location.pathname === '/'?'active':' '}

在jsx中使用三元表达式可以完成这个功能。
首先得在当前组件中注入router信息，否则location是没有的。

import { withRouter } from 'react-router-dom'

export default withRouter(你的组件)