Lesson 05: activeStyle not working for me!

[ShirleyWang822]

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'.

import React from 'react'
import {Link} from 'react-router'

export default React.createClass({
  render() {
    return (
    	<div>
    	<ul>
    		 <li><Link to="/about" activeStyle={{ color: 'red' }}>About</Link></li>
    		<li><Link to="/repos" activeClassName="active">Repos</Link></li>
    		<li><a className="active">Repos</a></li>
    	</ul>
    	</div>
    	)
  }
})

[addykim]

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-prop

which makes sense since according to the documentation here that isn't a prop that exists

[addykim]

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>

[ShirleyWang822]

@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.

[amackintosh]

I had an issue where my CSS for a:visited was appearing after a:active in 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 visited occurs first, before active.

[ddeamilivia]

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 FilterLink

And when I navigate to:
http://localhost:3000/SHOW_ACTIVE
The All link (SHOW_ALL) is shown as Active too.

[reverofevil]

So it's been almost a year. Was it that hard to add Nav prefix in docs?

[renemeye]

@ddeamilivia
Try this:

  <NavLink
    exact
    to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`}
    activeStyle={ {
      textDecoration: 'none',
      color: 'red'
    }}
  >

[ddeamilivia]

Thanks @renemeye !

[usmanarif]

@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.

[laspluviosillas]

@usmanarif experiencing the same thing

[mikehenrty]

@usmanarif, @laspluviosillas I was having a similar issue but thanks to this issue I found out it was update blocking.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

Edit: I was using redux, and had to wrap my connect call using withRouter

[italonabuco]

If 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