React-Router activeClass问题

Question

我正在尝试在我的网站上运行活动课程。我的大部分都按预期工作。当我点击我的主页时出现问题。这将选择主页，但如果我尝试单击嵌套在索引路由中的路由，则索引路由保持活动状态，我必须单击我想要的链接，然后再单击另一个链接以使索引链接再次处于非活动状态。我查看了文档，基于此，它应该工作。我也查看了有关该问题的其他文章，但它没有帮助。我正在使用react-router v2.0.0。

以下是我的路线：

<Route path="/" component={App} onEnter={currentUserCheck}>
  <IndexRoute component={HomePage} />
  <Route path="signup" component={SignupForm} />
  <Route path="login" component={LoginForm} />
  <Route path="polls" component={PollsPage}>
    <Route path="create-poll" component={CreatePollForm} onEnter={checkAuth} />
  </Route>
  <Route path ="users" component={UsersPage}>
    <Route path="edit-user" component={EditProfile} onEnter={checkAuth}/>
    <Route path=":username/:question" component={SinglePollPage} />
    <Route path=":username" component={ProfilePage} />
  </Route>
  <Route path="*" component={NoMatch}/>
</Route>

这是我的导航栏：

import React, { Component } from 'react';
import { Link, IndexLink } from 'react-router';
import { connect } from 'react-redux';
import { logoutUser } from '../actions/index';

class Navbar extends Component {
  handleLogout(e) {
    e.preventDefault();
    this.props.logoutUser();
  }

  render() {
    return (
      <div>
        <nav className="navbar-inverse">
          <div className="container-fluid">
            <div className="navbar-header">
              <button
                className="navbar-toggle collapsed"
                type="button"
                data-toggle="collapse"
                data-target="#navbar-collapse"
                aria-expanded="false"
              >
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
              </button>
              <IndexLink
                to="/"
                className="navbar-brand"
                activeStyle={{color: 'white'}}
              >
                Sondage
              </IndexLink>
            </div>
            <div id="navbar-collapse" className="collapse navbar-collapse">
              <ul className="nav navbar-nav navbar-right">
                <li>
                  <a className="dropdown-toggle"
                    id="browse-menu"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="true">
                    Browse
                    <span className="caret"></span>
                  </a>
                  <ul className="dropdown-menu" aria-labelledby="browse-menu">
                    <li><Link to="/users">users</Link></li>
                    <li><Link to="/polls">polls</Link></li>
                  </ul>
                </li>
                <li>
                  {
                    this.props.user.loggedIn ?
                      <Link to={'/polls/create-poll'} activeClassName="active">
                      <i className="glyphicon glyphicon-plus-sign"></i>
                      Poll
                    </Link>
                    : null
                  }
                </li>
                <li>
                  {
                    this.props.user.loggedIn ?
                      <Link to={`/users/${this.props.user.username}`} activeClassName="active">{this.props.user.username}</Link>
                    : <Link to="/signup" activeClassName="active">Sign up</Link>
                  }
                </li>
                <li>
                  {
                    this.props.user.loggedIn ?
                      <a
                      onClick={this.handleLogout.bind(this)}
                      href="#"
                    >
                    logout</a>
                    : <Link to="/login" activeClassName="active">Login</Link>
                  }
                  </li>
                </ul>
              </div>
          </div>
        </nav>
      </div>
    );
  }
}

let mapStateToProps = (state) => {
  return {
    user: state.user.current
  }
}

export default connect(mapStateToProps, { logoutUser })(Navbar);

我可以提供您可能需要的任何其他内容。我的Navbar组件在App组件中呈现。