activeClassName not being set

[pavanpodila]

Here is my route config:

var routes = (
    <Route handler={App}>
        <DefaultRoute name="index" handler={Dashboard}/>
        <Route name="dashboard" handler={Dashboard}/>
        <Route name="projects" handler={Projects}/>
        <Route name="people" handler={People}/>
        <Route name="planning" handler={Planning}/>
        <Route name="reports" handler={Reports}/>
        <Route name="profile" handler={Profile}/>
    </Route>
);

I am not sure what I am doing wrong, but I don't see the active class being set on my <Link />s.

Here is one of my links pointing at dashboard:

                        <li>
                            <Link to="dashboard">Dashboard</Link>
                        </li>

[pavanpodila]

Sorry, this is working. I was using this with Bootstrap which expects the active class to be set on the <li> instead of the <a> inside the <li>.

<Link> is setting it on the inner <a>, which is why there was no visual feedback on this. Not sure how I can fix this, but at least this is working from the router side.

False alarm.

[pavanpodila]

Also, I could fix the Bootstrap issue by taking cues from this issue.

[durban89]

i have a solution:

render: function () {
  let route = this.props.children.type.name.toLowerCase();

  let homeActive = (route == 'home') ? 'active' : '';
  let profileActive = (route == 'profile') ? 'active' : '';
  let messageActive = (route == 'message') ? 'active' : '';

  return (
    <div className='col-md-12'>
      <div className='row'>
        <ul className="nav nav-tabs">
          <li role="presentation" className={homeActive}>
            <Link to='/diagramShow/home'>Home</Link>
          </li>
          <li role="presentation" className={profileActive}>
            <Link to='/diagramShow/profile'>Profile</Link>
          </li>
          <li role="presentation" className={messageActive}>
            <Link to='/diagramShow/message'>Message</Link>
          </li>
        </ul>
      </div>
      <div className='row'>
        <div className='col-md-12'>
          {this.props.children}
        </div>
      </div>
    </div>
  );
}

[knowbody]

what is the point of commenting on the issue from April?