React-router: Active class always active for root route

[nirajmchauhan]

Version

2.8.1

By default always I am getting active class on the first li, this issue might have been fixed in previous version, but currently I am facing it again.

ReactDOM.render((
    <Router history={browserHistory}>
        <Route path="/" component={Wrapper}>
            <IndexRoute path="/" component={Login}></IndexRoute>
            <Route path="/registration" name="registration" component={Registration}></Route>
        </Route>
    </Router>
    ),
document.getElementById('app'));

My menu:

<li className="ui-component__primary-navigation-item">
  <Link to='/' activeClassName="active">Login</Link>
</li>
<li className="ui-component__primary-navigation-item">
  <Link to='/registration' activeClassName="active">Register</Link>
</li>

I have created this codepen of the issue.

[razh]

This can be handled by using the onlyActiveOnIndex prop:

<Link to="/" onlyActiveOnIndex activeClassName="active">Login</Link>

Or by using the IndexLink component:

<IndexLink to="/" activeClassName="active">Login</IndexLink>

[timdorr]

Correct, this isn't a bug. It's intended behavior.