I am new to the ReactJS world, and would like to know how can I pass active class name to the <li>
element instead of <a>(Link)
element.
Now I have this kind of code. The anchor class changes when clicked.
<li><IndexLink to='/' activeclassName='active'>A</IndexLink></li>
<li><Link to='/b' activeclassName='active'>B</Link></li>
<li><Link to='/c' activeclassName='active'>C</Link></li>
But I would like to get something similar to:
<li activeclassName='active'><IndexLink to='/'>A</IndexLink></li>
<li activeclassName='active'><Link to='/b'>B</Link></li>
<li activeclassName='active'><Link to='/c'>C</Link></li>
Thanks in advance
Great answer.
Just change the following to get it working...
Using react 15.1.0, react-router 2.5.0 and bootstrap 3.3 (this is less important), I developed this solution for making the links active:
npm install --save classnames
npm install --save lodash
The component:
Usage:
I am a beginner with React, so the above solution surely needs improvements and might contain approach errors. However, it might also contain useful information or a starting point to those interested.
Any feedback or suggestions are more than welcome. Thanks! :)
Try with react-router-active-component.
I couldn't get any of the previous answers to easily work due to incompatibilities between react or typescript versions (this is definitely not a mature ecosystem), but this component did the trick, and can be applied to other elements than
li
if needed: