Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

React router redirection


Sujet :

React

  1. #1
    Débutant  
    React router redirection
    J'utilise le template Dashboard de material ui et j'ai ajouté une page de connexion. Quand je rentre http://localhost:3000, je suis bien redirigé vers http://localhost:3000/login

    Mais quand je clique dans mon menu pour atteindre la page profil (http://localhost:3000/use), je suis de nouveau redirigé vers la page de connexion (http://localhost:3000/login).

    Je ne comprends pas le problème.

    Mon fichier(dossier) principal de parcours(routes) :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    import Login from "views/authentification/LoginPage.jsx";
    import Dashboard from "layouts/Dashboard/Dashboard.jsx";
     
    const indexRoutes = [
    { 
        path: "/login", 
        component: Login
    },
    { 
        path: "/dashboard", 
        component: Dashboard 
    },
    { 
        redirect: true, 
        path: "/", 
        to: "/login"
    }
    ];
     
    export default indexRoutes;


    Mon fichier de route Dahboard :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    // @material-ui/icons
    import Dashboard from "@material-ui/icons/Dashboard";
    import Person from "@material-ui/icons/Person";
    // import ContentPaste from "@material-ui/icons/ContentPaste";
    import LibraryBooks from "@material-ui/icons/LibraryBooks";
    import BubbleChart from "@material-ui/icons/BubbleChart";
    import LocationOn from "@material-ui/icons/LocationOn";
    import Notifications from "@material-ui/icons/Notifications";
    import Unarchive from "@material-ui/icons/Unarchive";
    // core components/views
    import DashboardPage from "views/Dashboard/Dashboard.jsx";
    import UserProfile from "views/UserProfile/UserProfile.jsx";
    import TableList from "views/TableList/TableList.jsx";
    import Typography from "views/Typography/Typography.jsx";
    import Icons from "views/Icons/Icons.jsx";
    import Maps from "views/Maps/Maps.jsx";
    import NotificationsPage from "views/Notifications/Notifications.jsx";
    import UpgradeToPro from "views/UpgradeToPro/UpgradeToPro.jsx";
     
    const dashboardRoutes = [
    {
    path: "/dashboard",
    sidebarName: "Dashboard",
    navbarName: "Material Dashboard",
    icon: Dashboard,
    component: DashboardPage
    },
    { 
    path: "/user",
    exact: true,
    sidebarName: "User Profile",
    navbarName: "Profile",
    icon: Person,
    component: UserProfile
    },
    {
    path: "/table",
    sidebarName: "Table List",
    navbarName: "Table List",
    icon: "content_paste",
    component: TableList
    },
    ..........
    ];
     
    export default dashboardRoutes;

  2. #2
    Membre éprouvé
    tu as oublié le r dans ton code ou en écrivant ce message (http://localhost:3000/use vs http://localhost:3000/user)
    Si tu n'as pas mis l'option exact sur ton mapping de "/" vers "login", "/use" va faire un match sur "/" et donc te renvoyer sur le login
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  3. #3
    Débutant  
    Même en mettant l'option exact sa marche pas:
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
        { 
            redirect: true, 
            exact: true,
            path: "/", 
            to: "/login"
        }

  4. #4
    Membre éprouvé
    OK, mais est-ce que le résultat est différent ?
    A propos du r (use / user), t'es bon dans test tests, c'était une erreur dans ton premier post ?
    Les autres routes fonctionnent ? (table)
    je n'ai pas de vue d'ensemble, donc j'essaye de deviner...
    C'est pas /dashboard/user ta route plutôt ?
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  5. #5
    Débutant  
    Pardons, voici le fichier complet mis à jour des routes du dashboard :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    // @material-ui/icons
    import Dashboard from "@material-ui/icons/Dashboard";
    import Person from "@material-ui/icons/Person";
    // import ContentPaste from "@material-ui/icons/ContentPaste";
    import LibraryBooks from "@material-ui/icons/LibraryBooks";
    import BubbleChart from "@material-ui/icons/BubbleChart";
    import LocationOn from "@material-ui/icons/LocationOn";
    import Notifications from "@material-ui/icons/Notifications";
    import Unarchive from "@material-ui/icons/Unarchive";
    // core components/views
    import DashboardPage from "views/Dashboard/Dashboard.jsx";
    import UserProfile from "views/UserProfile/UserProfile.jsx";
    import TableList from "views/TableList/TableList.jsx";
    import Typography from "views/Typography/Typography.jsx";
    import Icons from "views/Icons/Icons.jsx";
    import Maps from "views/Maps/Maps.jsx";
    import NotificationsPage from "views/Notifications/Notifications.jsx";
    import UpgradeToPro from "views/UpgradeToPro/UpgradeToPro.jsx";
     
    const dashboardRoutes = [
      {
        path: "/dashboard",
        sidebarName: "Dashboard",
        navbarName: "Material Dashboard",
        icon: Dashboard,
        component: DashboardPage
      },
      {
        path: "/user",
        sidebarName: "User Profile",
        navbarName: "Profile",
        icon: Person,
        component: UserProfile
      },
      {
        path: "/table",
        sidebarName: "Table List",
        navbarName: "Table List",
        icon: "content_paste",
        component: TableList
      },
      {
        path: "/typography",
        sidebarName: "Typography",
        navbarName: "Typography",
        icon: LibraryBooks,
        component: Typography
      },
      {
        path: "/icons",
        sidebarName: "Icons",
        navbarName: "Icons",
        icon: BubbleChart,
        component: Icons
      },
      {
        path: "/maps",
        sidebarName: "Maps",
        navbarName: "Map",
        icon: LocationOn,
        component: Maps
      },
      {
        path: "/notifications",
        sidebarName: "Notifications",
        navbarName: "Notifications",
        icon: Notifications,
        component: NotificationsPage
      },
      {
        path: "/upgrade-to-pro",
        sidebarName: "Upgrade To PRO",
        navbarName: "Upgrade To PRO",
        icon: Unarchive,
        component: UpgradeToPro
      }
      //{ redirect: true, path: "/", to: "/dashboard", navbarName: "Redirect" } : Poser problème pour la redirection après la connexion
    ];
     
    export default dashboardRoutes;


    Aucunes ne fonctionne. Elle redirige vers la page de login.


    Voici le layouts du Dashboard :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    /* eslint-disable */
    import React from "react";
    import PropTypes from "prop-types";
    import { Switch, Route, Redirect } from "react-router-dom";
    // creates a beautiful scrollbar
    import PerfectScrollbar from "perfect-scrollbar";
    import "perfect-scrollbar/css/perfect-scrollbar.css";
    // @material-ui/core components
    import withStyles from "@material-ui/core/styles/withStyles";
    // core components
    import Header from "components/Header/Header.jsx";
    import Footer from "components/Footer/Footer.jsx";
    import Sidebar from "components/Sidebar/Sidebar.jsx";
     
    import dashboardRoutes from "routes/dashboard.jsx";
     
    import dashboardStyle from "assets/jss/material-dashboard-react/layouts/dashboardStyle.jsx";
     
    import image from "assets/img/sidebar-2.jpg";
    import logo from "assets/img/reactlogo.png";
     
    const switchRoutes = (
      <Switch>
        {dashboardRoutes.map((prop, key) => {
          if (prop.redirect)
            return <Redirect from={prop.path} to={prop.to} key={key} />;
          return <Route path={prop.path} component={prop.component} key={key} />;
        })}
      </Switch>
    );
     
    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          mobileOpen: false
        };
        this.resizeFunction = this.resizeFunction.bind(this);
      }
      handleDrawerToggle = () => {
        this.setState({ mobileOpen: !this.state.mobileOpen });
      };
      getRoute() {
        return this.props.location.pathname !== "/maps";
      }
      resizeFunction() {
        if (window.innerWidth >= 960) {
          this.setState({ mobileOpen: false });
        }
      }
      componentDidMount() {
        if (navigator.platform.indexOf("Win") > -1) {
          const ps = new PerfectScrollbar(this.refs.mainPanel);
        }
        window.addEventListener("resize", this.resizeFunction);
      }
      componentDidUpdate(e) {
        if (e.history.location.pathname !== e.location.pathname) {
          this.refs.mainPanel.scrollTop = 0;
          if (this.state.mobileOpen) {
            this.setState({ mobileOpen: false });
          }
        }
      }
      componentWillUnmount() {
        window.removeEventListener("resize", this.resizeFunction);
      }
      render() {
        const { classes, ...rest } = this.props;
        return (
          <div className={classes.wrapper}>
            <Sidebar
              routes={dashboardRoutes}
              logoText={"Creative Tim"}
              logo={logo}
              image={image}
              handleDrawerToggle={this.handleDrawerToggle}
              open={this.state.mobileOpen}
              color="blue"
              {...rest}
            />
            <div className={classes.mainPanel} ref="mainPanel">
              <Header
                routes={dashboardRoutes}
                handleDrawerToggle={this.handleDrawerToggle}
                {...rest}
              />
              {/* On the /maps route we want the map to be on full screen - this is not possible if the content and conatiner classes are present because they have some paddings which would make the map smaller */}
              {this.getRoute() ? (
                <div className={classes.content}>
                  <div className={classes.container}>{switchRoutes}</div>
                </div>
              ) : (
                <div className={classes.map}>{switchRoutes}</div>
              )}
              {this.getRoute() ? <Footer /> : null}
            </div>
          </div>
        );
      }
    }
     
    App.propTypes = {
      classes: PropTypes.object.isRequired
    };
     
    export default withStyles(dashboardStyle)(App);


    quand je tape http://localhost:3000/dashboard/user, sa reste sur la page du Dashboard

  6. #6
    Débutant  
    Voici aussi comment je redirige après la connexion:
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
          return <Redirect to={"/dashboard"}/>;

  7. #7
    Membre éprouvé
    Salut,

    Je suis pas convaincu par

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    const switchRoutes = (
      <Switch>
        {dashboardRoutes.map((prop, key) => {
          if (prop.redirect)
            return <Redirect from={prop.path} to={prop.to} key={key} />;
          return <Route path={prop.path} component={prop.component} key={key} />;
        })}
      </Switch>
    );


    Peux tu essayer de changer ta méthode render:
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
     
    class App extends React.Component {
     
      // ...
     
      render() {
        return (
          <Switch>
            {dashboardRoutes.map((prop, key) => {
              if (prop.redirect)
                return <Redirect from={prop.path} to={prop.to} key={key} />;
          return <Route path={prop.path} component={prop.component} key={key} />;
        })}
      </Switch>);
    /*
        const { classes, ...rest } = this.props;
        return (
          <div className={classes.wrapper}>
            <Sidebar
              routes={dashboardRoutes}
              logoText={"Creative Tim"}
              logo={logo}
              image={image}
              handleDrawerToggle={this.handleDrawerToggle}
              open={this.state.mobileOpen}
              color="blue"
              {...rest}
            />
            <div className={classes.mainPanel} ref="mainPanel">
              <Header
                routes={dashboardRoutes}
                handleDrawerToggle={this.handleDrawerToggle}
                {...rest}
              />
              {/* On the /maps route we want the map to be on full screen - this is not possible if the content and conatiner classes are present because they have some paddings which would make the map smaller */}
              {this.getRoute() ? (
                <div className={classes.content}>
                  <div className={classes.container}>{switchRoutes}</div>
                </div>
              ) : (
                <div className={classes.map}>{switchRoutes}</div>
              )}
              {this.getRoute() ? <Footer /> : null}
            </div>
          </div>
        );
    */
      }
    }


    Ensuite, je pense que ta route est /dashboard/user et non /user

    ++
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  8. #8
    Débutant  
    en effet, faut que je rajoute /dashboard devant toute mes url dans mon fichier de route.
    Mais pourquoi je ne peux pas les laisser telle quel

  9. #9
    Membre éprouvé
    Citation Envoyé par totot Voir le message
    Mais pourquoi je ne peux pas les laisser telle quel
    Parce que tu les explote en nested route de dashboard:

    Dans ton code, c'est le composant qui répond à Dashboard qui va exploiter le path et ensuite choisir ce que lui affiche. Pour que ce composant soit appelé, tu dois avoir /dashboard dans l'URL
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  10. #10
    Débutant  
    J'ai pas compris ton explication là

  11. #11
    Membre éprouvé
    Dans ton indexRoutes, tu as défini:
    • /login qui va sur ton composant de Login
    • /dashboard qui va sur Dashboard
    • / qui redirige sur /login

    Dans dashboardRoutes tu as défini notamment /user qui va sur User
    Donc pour pouvoir atteindre un code capable de traiter /user, tu dois déjà être dans Dashboard. Or Dashboard n'est executé que si l'URL contient /dashboard
    En fait dans ton cas, /user est une NestedRoute de Dashboard.

    Si tu souhaites avoir /user, tu dois faire ce mapping dans ton indexRoutes.

    Les nested routes sont en général plutôt utilisées pour gérer la granularité d'accès

    Par exemple /users (défini en index route) va sur le composant Users (un peu comme une catégorie)

    Ce composant va avoir une nested route qui va réagir à l'id d'un user (si l'id est présent dans l'url) et sinon affiche par exemple la liste des users
    Ensuite tu peux imaginer que le composant qui réagit à /user/:id affiche par défaut la fiche de ton user (en visualisation) mais qu'une nested route /edit affichera ce même user en edition.

    cet article est pas mal :
    https://tylermcginnis.com/react-router-nested-routes/
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  12. #12
    Débutant  
    Très bien.

    Dans mon cas c'est quoi le mieux

  13. #13
    Membre éprouvé
    Je n'ai pas de jugement à porter. Je ne connais pas ton projet, ce que tu cherches à faire au final...
    Moi j'ai plutôt tendance à faire pointer / sur la home (ton dashboard ?), rediriger sur /login si l'utilisateur n'est pas connecté
    puis dans Dashboard (le composant pas la route) à traiter soit le cas sans rien de plus dans l'URL avec des widgets... soit en fonction de l'url, donner accès à d'autres fonctions. Par exemple
    /users -> gestion des user
    /account -> gérer mon compte
    ...
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  14. #14
    Débutant  
    En effet, c'est plus ou moins ce que je vais faire au final. Quand on arrivera sur le site, on aura une page d'accueil avec une brève présentation (http://localhost:3000/).
    Ensuite, on aura un onglet pour accéder à la page de login (http://localhost:3000/login).
    Et après la connexion, on est redirigé vers le dashboard (http://localhost:3000/dashboard)

    Maintenant faut que je trouve comment mettre en place tout cela. Je voudrais en plus garder mes 2 fichiers de routes distincts.

  15. #15
    Débutant  
    Je reviens ici car je n'arrive toujours pas à mettre correctement mes routes en places.
    Voici ce que je veux :
    http://localhost:3000/ : Page d'accueil de mon site avec une description ...
    http://localhost:3000/login : Page de login
    http://localhost:3000/private/dashboard : Tableau de bord de l'utilisateur
    http://localhost:3000/private/uneFonctionalité

    Je n'arrive pas à faire la redirection vers le dashboard depuis la page de login
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
     
    react-dom.development.js:57 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
        at invariant (react-dom.development.js:57)
        at scheduleWork (react-dom.development.js:18486)
        at Object.enqueueSetState (react-dom.development.js:12143)
        at Router.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:386)
        at Router.js:102
        at listener (createTransitionManager.js:43)
        at createTransitionManager.js:61
        at Array.forEach (<anonymous>)
        at Object.notifyListeners (createTransitionManager.js:60)
        at setState (createBrowserHistory.js:84)
        at createBrowserHistory.js:198
        at Object.confirmTransitionTo (createTransitionManager.js:33)
        at Object.replace (createBrowserHistory.js:181)
        at Redirect.perform (Redirect.js:115)
        at Redirect.componentDidMount (Redirect.js:75)
        at commitLifeCycles (react-dom.development.js:15986)
        at commitAllLifeCycles (react-dom.development.js:17388)
        at HTMLUnknownElement.callCallback (react-dom.development.js:147)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
        at invokeGuardedCallback (react-dom.development.js:250)
        at commitRoot (react-dom.development.js:17549)
        at completeRoot (react-dom.development.js:19002)
        at performWorkOnRoot (react-dom.development.js:18924)
        at performWork (react-dom.development.js:18826)
        at performSyncWork (react-dom.development.js:18799)
        at requestWork (react-dom.development.js:18676)
        at scheduleWork (react-dom.development.js:18480)
        at Object.enqueueSetState (react-dom.development.js:12143)
        at LoginPage.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:386)
        at LoginPage.jsx:76
    invariant @ react-dom.development.js:57
    scheduleWork @ react-dom.development.js:18486
    enqueueSetState @ react-dom.development.js:12143
    push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:386
    (anonymous) @ Router.js:102
    listener @ createTransitionManager.js:43
    (anonymous) @ createTransitionManager.js:61
    notifyListeners @ createTransitionManager.js:60
    setState @ createBrowserHistory.js:84
    (anonymous) @ createBrowserHistory.js:198
    confirmTransitionTo @ createTransitionManager.js:33
    replace @ createBrowserHistory.js:181
    perform @ Redirect.js:115
    componentDidMount @ Redirect.js:75
    commitLifeCycles @ react-dom.development.js:15986
    commitAllLifeCycles @ react-dom.development.js:17388
    callCallback @ react-dom.development.js:147
    invokeGuardedCallbackDev @ react-dom.development.js:196
    invokeGuardedCallback @ react-dom.development.js:250
    commitRoot @ react-dom.development.js:17549
    completeRoot @ react-dom.development.js:19002
    performWorkOnRoot @ react-dom.development.js:18924
    performWork @ react-dom.development.js:18826
    performSyncWork @ react-dom.development.js:18799
    requestWork @ react-dom.development.js:18676
    scheduleWork @ react-dom.development.js:18480
    enqueueSetState @ react-dom.development.js:12143
    push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:386
    (anonymous) @ LoginPage.jsx:76
    Promise.then (async)
    handleSubmit @ LoginPage.jsx:68
    callCallback @ react-dom.development.js:147
    invokeGuardedCallbackDev @ react-dom.development.js:196
    invokeGuardedCallback @ react-dom.development.js:250
    invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
    executeDispatch @ react-dom.development.js:622
    executeDispatchesInOrder @ react-dom.development.js:647
    executeDispatchesAndRelease @ react-dom.development.js:747
    executeDispatchesAndReleaseTopLevel @ react-dom.development.js:760
    forEachAccumulated @ react-dom.development.js:727
    runEventsInBatch @ react-dom.development.js:903
    runExtractedEventsInBatch @ react-dom.development.js:913
    handleTopLevel @ react-dom.development.js:5078
    batchedUpdates$1 @ react-dom.development.js:19041
    batchedUpdates @ react-dom.development.js:2307
    dispatchEvent @ react-dom.development.js:5158
    interactiveUpdates$1 @ react-dom.development.js:19103
    interactiveUpdates @ react-dom.development.js:2328
    dispatchInteractiveEvent @ react-dom.development.js:5134
    index.js:1452 The above error occurred in the <Redirect> component:
        in Redirect (at src/index.js:45)
        in Switch (at src/index.js:42)
        in Router (at src/index.js:41)
        in I18nextProvider (at src/index.js:40)
     
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
    function.console.(anonymous function) @ index.js:1452
    logCapturedError @ react-dom.development.js:15845
    logError @ react-dom.development.js:15880
    update.callback @ react-dom.development.js:16716
    callCallback @ react-dom.development.js:11636
    commitUpdateEffects @ react-dom.development.js:11676
    commitUpdateQueue @ react-dom.development.js:11664
    commitLifeCycles @ react-dom.development.js:16029
    commitAllLifeCycles @ react-dom.development.js:17388
    callCallback @ react-dom.development.js:147
    invokeGuardedCallbackDev @ react-dom.development.js:196
    invokeGuardedCallback @ react-dom.development.js:250
    commitRoot @ react-dom.development.js:17549
    completeRoot @ react-dom.development.js:19002
    performWorkOnRoot @ react-dom.development.js:18924
    performWork @ react-dom.development.js:18826
    performSyncWork @ react-dom.development.js:18799
    requestWork @ react-dom.development.js:18676
    scheduleWork @ react-dom.development.js:18480
    enqueueSetState @ react-dom.development.js:12143
    push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:386
    (anonymous) @ LoginPage.jsx:76
    Promise.then (async)
    handleSubmit @ LoginPage.jsx:68
    callCallback @ react-dom.development.js:147
    invokeGuardedCallbackDev @ react-dom.development.js:196
    invokeGuardedCallback @ react-dom.development.js:250
    invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
    executeDispatch @ react-dom.development.js:622
    executeDispatchesInOrder @ react-dom.development.js:647
    executeDispatchesAndRelease @ react-dom.development.js:747
    executeDispatchesAndReleaseTopLevel @ react-dom.development.js:760
    forEachAccumulated @ react-dom.development.js:727
    runEventsInBatch @ react-dom.development.js:903
    runExtractedEventsInBatch @ react-dom.development.js:913
    handleTopLevel @ react-dom.development.js:5078
    batchedUpdates$1 @ react-dom.development.js:19041
    batchedUpdates @ react-dom.development.js:2307
    dispatchEvent @ react-dom.development.js:5158
    interactiveUpdates$1 @ react-dom.development.js:19103
    interactiveUpdates @ react-dom.development.js:2328
    dispatchInteractiveEvent @ react-dom.development.js:5134
    LoginPage.jsx:79 Uncaught (in promise) TypeError: Cannot read property 'status' of undefined
        at LoginPage.jsx:79