NavLink activeClassName appears before className

[carloluis]

Version

4.1.1

Test Case

https://codepen.io/carloluis/pen/gWzPzd

Steps to reproduce

• have at least two routes
• set up a nav-bar with
  • normal and active classes have at least one property in common

Expected Behavior

active navigation link should have set all the active class properties

Actual Behavior

common properties are resolved with normal class values

• correct order to apply classes in should be:
  • first className, then activeClassName

<Link
          className={ isActive ? [ className, activeClassName ].filter(i => i).join(' ') : className }
          style={isActive ? { ...style, ...activeStyle } : style}
          {...rest}
        />

• actual code returned from NavLink component

<Link
          to={to}
          className={isActive ? [ activeClassName, className ].filter(i => i).join(' ') : className}
          style={isActive ? { ...style, ...activeStyle } : style}
          {...rest}
        />

[timdorr]

Could you submit a PR to change this?

[carloluis]

Yes (#5109)

[carloluis]

No mistake. The correct title for this issue would be: NavLink activeClassName appears before className.
So, I'll change the title. The PR still open in case you want to merge and set the active-class-name to the end (which corresponds with the right order in which default and active classes must be declare in css)