Repository navigation
Lesson 05: activeStyle not working for me! #316
Description
Activity
Can you be a bit more elaborate about activeClassName is not working? Are you getting an error or is the color not changing as expected?
For me I did the following
import React, {Component} from 'react' class NavLink extends Component { render() { return <li><Link {...this.props} activeClassName="active"/></li> } }and then when I try to use in the same file
<NavLink to="/">Home</NavLink>it results in
dist.js:367 Warning: Unknown prop `activeClassName` on <a> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-propwhich makes sense since according to the documentation here that isn't a prop that exists
Actually I figured it out thanks to the ReactTraining docs on NavLinks
BEFORE
import {Link} from 'react-router' <li><Link to="/about" activeStyle={{ color: 'red' }}>About</Link></li>AFTER
import { NavLink } from 'react-router-dom' <li><NavLink to="/about" activeStyle={{ color:'red' }}>About</NavLink><li>Reacted by Shirley Wang, Francisco Rodrigues, Travis Lindsey, Łukasz ISU Biedroń , Douglas Duhaime, Ben Wurth, Carlos, Said Furkan Dize, smattt, Puja Srivastava and 22 moreReacted by Shirley Wang, Francisco Rodrigues, Anton, Puja Srivastava, Armağan, browger, hexie and Marc VilaReacted by Pawel, Andhika Satya Prawira, Aymen Zaouali and Peter Reshetin@addykim thank you so much, Addy. "The class to give the element when it is active". I paid no attention to 'active'. I am an English learner. I'm very happy you can understand my expression. And thank you very much.
I had an issue where my CSS for
a:visitedwas appearing aftera:activein my CSS file and it was causing the<Link>from react-router to not work.If anyone sees an issue similar to this, check that. Make sure
visitedoccurs first, beforeactive.Based on this tutorial:
https://redux.js.org/docs/advanced/UsageWithReactRouter.html
I have this:import React from 'react' import { NavLink } from 'react-router-dom' const FilterLink = ({ filter, children }) => ( <NavLink to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`} activeStyle={ { textDecoration: 'none', color: 'red' }} > {children} </NavLink> ) export default FilterLinkAnd when I navigate to:
http://localhost:3000/SHOW_ACTIVE
The All link (SHOW_ALL) is shown as Active too.So it's been almost a year. Was it that hard to add
Navprefix in docs?Reacted by JPC, Ken, Dawid Hen, thian4, Kris Kesy, Jefferson Vivanco and Bogdan Slovyagin@ddeamilivia
Try this:<NavLink exact to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`} activeStyle={ { textDecoration: 'none', color: 'red' }} >Reacted by AhmeD HegazY, Dawid Hen, 周丰, Alex McCabe, Wonmin Jeon and IndrėThanks @renemeye !
@addykim its working for me as per your code but I have to manually refresh the page for getting the active link. I have got 3 links like:
<NavLink to="/home" activeStyle={{ color:'green' }}>Home</NavLink> <NavLink to="/about" activeStyle={{ color:'blue' }}>About</NavLink> <NavLink to="/contact" activeStyle={{ color:'red' }}>Contact</NavLink>
So if my url is /home, Home link appears in green, but if I click on About then it wont change the color until and unless I refresh the page manually.@usmanarif experiencing the same thing
Reacted by Milo Kusold (they/them), Jonathan Banon and gowthamyaal@usmanarif, @laspluviosillas I was having a similar issue but thanks to this issue I found out it was update blocking.
Edit: I was using redux, and had to wrap my
connectcall using withRouterReacted by Frank HanglerReacted by Frank HanglerIf you're using CSS Modules, try something like this
CSS file:
a .active{ color: red }JS file i.e.:
<NavLink exact to="/" activeClassName={styles.active}>Home</NavLink>PS: "styles" is the name I called my CSS file
This is the code in my App.js. In the third li className works well. But activeStyle and activeClassName both don't work for Link. I have a css file about 'active'.