CODEWITHSUNDEEP
reactjsreact-router
Itzik Ben Hutta
Itzik Ben Hutta

Reputation: 193

React Router activeClassName not changing class to the active route

I have a weird problem with React Router. The activeClassName takes effect only when I navigate from '/' to the child components. If however I try to navigate from 'update' to 'updatepassword' it won't work. It will keep the active class at the update view and vise versa, it depends on which route I hit first after navigating from '/'. Please take a look at my code below:

How I define the routes

  <Provider store={store}>
    <Router history={hashHistory}>
      <Route path="/" component={ Template } >
        <IndexRoute component={ Welcome } />
        <Route path="login" component={ Login } />
        <Route path="register" component={ Register } />
        <Route onEnter={requireLogin}>
          <Route path="update" component={ Update } />
          <Route path="updatepassword" component={ Update_password } />
        </Route>
      </Route>
    </Router>
  </Provider>

Links:

      <nav className="navbar navbar-default navbar-fixed-top">
        <div className="container">
          <div className="navbar-header">
            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
              <span className="sr-only">Toggle navigation</span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
            </button>
            <Link to={ '/' } className="navbar-brand">React-Phoenix-Chat</Link>
          </div>
          <div className="collapse navbar-collapse" id="navbar">
            <ul className="nav navbar-nav navbar-right">
              <li> <a onClick={this.handleLogout.bind(this)} href="#" activeClassName="active">Logout</a></li>
              <li><Link activeClassName="active" to={ 'update' }>Update</Link></li>
              <li><Link activeClassName="active" to={ 'updatepassword' }>Update Password</Link></li>
              <li><a href="#">{this.props.user.username}</a></li>
            </ul>
          </div>
        </div>
      </nav>

Upvotes: 0

Views: 1292

Answers (1)

Itzik Ben Hutta
Itzik Ben Hutta

Reputation: 193

I found the problem. I had to change this:

 <Route onEnter={requireLogin}>
   <Route path="/update" component={ Update } />
   <Route path="/updatepassword" component={ Update_password } />
 </Route>

To this: 

 <Route path="/update" component={ Update } onEnter={requireLogin} />
 <Route path="/updatepassword" component={ Update_password } onEnter={requireLogin} />

Upvotes: 1

Related Questions