How to use activeClassName to change the class of the upper layer or other tags in the jsx of react?

1 li tag class can display the style normally using active, but it is not effective to replace the li tag with NavLink.
directly setting the style in NavLink (in the form of figure 2) can only change the class of the a tag (converted to a tag after html) rather than the li tag, so the effect can not be achieved.

I want to change the className in the li tag to active based on the route such as to= "/" address. How can we do that? Css is really a little complicated, directly to change css do not know how to change, is there a method that can be realized in react, or ideas that can be done?
Thank you very much, bosses.

Html5 react.js html css javascript

Mar.13,2021

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

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

you can do this using ternary expressions in jsx.
you must first inject router information into the current component, otherwise there is no location.

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

export default withRouter()

Previous: Can the options in the shuttle box of antd be customized to antd's tree control Tree?

Next: Webpack version 4.0 extract-text-webpack-plugin cannot be used, what are the alternatives?