在开发中，重定向和404这种需求非常常见，使用React-router4.0可以使用Redirect进行重定向
constructor(){
super();
this.state = {value: '',logined: false};
this.handleChange = this.handleChange.bind(this);
this.toLogin = this.toLogin.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value})
}
toLogin(accesstoken) {
axios.post('yoururl',{accesstoken})
.then((res) => {
this.setState({logined: true});
})
}
render() {
if(this.props.logined) {
return (
<Redirect to="/user"/>
)
}
return (
export default Login;
以上这个示例仅仅是将登录的状态作为组件的state使用和维护的，在实际开发中，是否登录的状态应该是全局使用的，因此这时候可能你会需要考虑使用redux等这些数据状态管理库，方便我们做数据的管理。这里需要注意的使用传统的登录方式使用cookie存储无序且复杂的sessionID之类的来储存用户的信息，使用token的话，返回的可能是用户信息，此时可以考虑使用sessionStorage、localStorage来储存用户信息（包括头像、用户名等），此时书写reducer时需要指定初始状态从存储中获取，如：
const Login = function(state,action) {
if(!state) {
console.log('state');
if(sessionStorage.getItem('usermsg')) {
return {
logined: true,usermsg: JSON.parse(sessionStorage.getItem('usermsg'))
}
}
return {
logined: false,usermsg: {}
}
}
switch(action.type) {
case LOGINSUCCESS:
return {logined: true,usermsg: action.usermsg};
case LOGINFailed:
return {logined: false,usermsg:{}};
case LOGINOUT:
return {logined: false,usermsg: {}};
default:
return state
}
};
export default Login;
指定404页面也非常简单，只需要在路由系统最后使用Route指定404页面的component即可
