Javascript 反应类问题

Javascript 反应类问题,javascript,reactjs,react-router,Javascript,Reactjs,React Router,我正在努力让活跃的课程在我的网站上运行。我让他们中的大多数都按预期工作。当我点击我的主页时,问题就出现了。这将选择主页,但如果我尝试单击嵌套在索引路由中的路由,索引路由将保持活动状态,我必须单击我想要的链接,然后单击另一个链接以使索引链接再次处于非活动状态。我已经看过了文档,基于此,它应该是有效的。我也看过其他关于这个问题的文章,但没有帮助。我正在使用react路由器v2.0.0 以下是我的路线: <Route path="/" component={App} onEnter={curre

我正在努力让活跃的课程在我的网站上运行。我让他们中的大多数都按预期工作。当我点击我的主页时,问题就出现了。这将选择主页,但如果我尝试单击嵌套在索引路由中的路由,索引路由将保持活动状态,我必须单击我想要的链接,然后单击另一个链接以使索引链接再次处于非活动状态。我已经看过了文档,基于此,它应该是有效的。我也看过其他关于这个问题的文章,但没有帮助。我正在使用react路由器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);
import React,{Component}来自'React';
从“反应路由器”导入{Link,IndexLink};
从'react redux'导入{connect};
从“../actions/index”导入{logoutUser};
类导航栏扩展组件{
手动登录(e){
e、 预防默认值();
this.props.logoutUser();
}
render(){
返回(
桑达格
  • :登入 }
); } } 让mapStateToProps=(状态)=>{ 返回{ 用户:state.user.current } } 导出默认连接(mapstatetops,{logoutUser})(导航栏);

我可以提供你可能需要的任何其他东西。我的导航栏组件在应用程序组件中呈现。

您是否尝试过:是的,它就在我的代码中。