我很反应并重定向到另一条路径并限制其他用户直接进入/main
路径。我正在检查,if yes ..
它会重定向......
因此,当我重定向时,它会重定向到/login
页面,这会重定向两次。
现在,当我登录并填写我的凭据并获得令牌时,现在我设置的字段即yes
,因为componentWillUnmount()
未调用。
所以这意味着组件没有安装。因为我把所有凭据都正确,因为我说我是字段(验证是'是')然后流不会重定向到/main..
它将被重定向到同一页/login
并给出错误。
class Main extends Component {
constructor() {
super();
this.state = { userInfo: '', onlineUser: '', authenticate: 'no' };
}
async getUsers() {
let user = await apiGateway.getUserInfo();
alert(' did Mount1');
alert(user);
if(user == null) {
this.setState({ authenticate : 'yes' });
return;
}
else {
this.setState({ userInfo : user.data });
}
}
async setUpOnlineUsers() {
let online = await apiGateway.getOnlineUsers();
alert('did Mount2');
if (online == null) {
this.setState({ authenticate: 'yes' });
return;
}
else {
this.setState({ onlineUser: online.data });
}
}
async componentDidMount() {
this.getUsers();
this.setUpOnlineUsers();
}
async componentWillUnmount() {
alert('unmount');
}
render() {
const { authenticate } = this.state;
alert(authenticate + ' render');
if (authenticate === 'yes') {
console.log('Redirect');
return <Redirect to='/login' /> ;
}
const { userInfo } = this.state;
const { onlineUser } = this.state;
console.log(onlineUser);
return (
<div className='Main'>
<div className='Main-header'>
<Header userInfo = {userInfo}/>
</div>
<div className='Main-chat'>
<Chat onlineUser = {onlineUser}/>
</div>
<div className="Main-container">
<Image imageArray = {imageArray}/>
</div>
</div>
);
}
}
export default Main;
** index.js **
class App extends Component{
render(){
return(
<Router>
<div>
<Route path ='/login' component={Login}/>
<Route path = '/register' component={Register}/>
<Route path = '/' component={Main}/>
</div>
</Router>
);
}
}
export default App;