Reactjs : Мне нужно обновить компонент входа в систему, чтобы перенаправить аутентифицированных пользователей на панель мониторинга

#reactjs #react-redux #browser-history

Вопрос:

Я пытаюсь настроить систему аутентификации пользователей в своем приложении react-redux. при входе в систему пользователь успешно проходит аутентификацию, однако пользователь застревает на странице входа после первого щелчка и переходит на панель мониторинга только после обновления страницы.

 //Login

  componentDidMount() {
    
    // If logged in and user navigates to Login page, should redirect them to dashboard
    if (this.props.auth.isAuthenticated) {
      history.push("/c/dashboard");
    }     
  }
  componentWillUpdate(nextProps) {
   
    if (nextProps.auth.isAuthenticated) {
      console.log("auth",nextProps.auth.isAuthenticated) // returns isAuthenticated as true
      history.push("/c/dashboard"); // push user to dashboard when they login
    }
if (nextProps.errors) {
      this.setState({
        errors: nextProps.errors
      });
    }
  }
onSubmit = e => {
    e.preventDefault();
const userData = {
      email: this.state.email,
      password: this.state.password
    };
    this.props.loginUser(userData); 
  };


 

App.js

 render(){
   
    return (
      <Provider store={store}>
        <BrowserRouter>
     
         <Switch>
           <Route  path="/c">
             <LoggedInComponent /> // here is were you have the dashboard component
           </Route>
          
           <Route  path="/s">
             <LoggedOutComponent />  //here is were you have the login component    
           </Route>  
          
         </Switch>
       
   </BrowserRouter>
   </Provider>


 

Как я могу перенаправить пользователя на панель мониторинга после первого нажатия кнопки входа в систему.

Комментарии:

1. Пожалуйста, приведите воспроизводимый пример, например, с помощью Codepen

2. хорошо, позволь мне это сделать …