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