reactjs - 减速器在 IonRouterOutlet 内无法正常工作

问题描述

这是我的 Ionic4 应用程序的主要组件（“PrivateRoute”组件来自 react-router-private）：

const App: React.FC = (props: any) => {

    const { userLogged } = props.logged;

    return (
        <IonApp>
            <IonReactRouter>
                <IonRouterOutlet id="principal">
                    <Route exact path="/" render={() => <Redirect to="/login" />} />
                    <Route exact path="/login" component={LoginPage} />
                    <PrivateRoute exact path="/dashboard" component={Dashboard} authStatus={userLogged.isLogged} redirectURL="/login" />
                </IonRouterOutlet>
            </IonReactRouter>
            />
    </IonApp>
    );
}

const mapStateToProps = (state: any) => {
    return {
        logged: state.logged,
    };
}

export default connect(mapStateToProps)(App);

这是我的 LoginPage 组件：

const LoginPage: React.FC = (props: any) => {

    const { userLogged } = props.logged;

    const handleLogin = (inputs: any) => {
        const user = {
            "username": inputs.username,
            "password": inputs.password,
        };

        axios.post(`URL`,
            user,
        )
            .then(response => {
                props.setLogged(response.data);
            })
            .catch(error => {});
    }

    return (
        <>{userLogged.isLogged ?
            <Redirect to="/dashboard" />
            :
            <IonPage>
                <IonContent>
                    <>
                        <IonGrid>
                            <IonRow>
                                <IonCol
                                    offsetXl="3" sizeXl="6"
                                    offsetLg="2" sizeLg="8"
                                    offsetMd="2" sizeMd="8"
                                    offsetSm="1" sizeSm="10"
                                    sizeXs="12">
                                    <Login save={handleLogin} >
                                    </Login>
                                </IonCol>
                            </IonRow>
                        </IonGrid>
                    </>
                </IonContent>
            </IonPage>
        }
        </>
    );
};

const mapStateToProps = (state: any) => {
    return {
        logged: state.logged,
    };
}

const mapDispatchToProps = {
    setLogged,
};

export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);

LoginPage里面的Login组件，只是一个表单，没有必要详细介绍。“setLogged”操作仅保存带有用户数据和会话令牌的 JSON，并将“isLogged”变量从 reducer 更改为“true”。此操作运行正常。

我遇到的问题如下。当用户登录时，“LoginPage”组件正确检测到状态变量“userLogged.isLogged”变为“true”，因此将其渲染<Redirect>到“Dashboard”组件，但“Dashboard”组件的受保护路径没有检测到它（至少看起来如此）。如果我将受保护的路线放在“IonRouterOutlet”之外，它就可以完美运行。但我需要它位于“IonRouterOutlet”内，因为我需要访问 Ionic 页面的事件（useIonViewDidEnter）。我怎样才能解决这个问题？通过从“IonRouterOutlet”中正确操作受保护的路由，或以某种方式模拟“useIonViewDidEnter”。

我已经尝试了以下受保护的路线：

           <Route exact path="/dashboard"
                component={userLogged.isLogged ? Dashboard : LoginPage}
            />
            <Route exact path="/dashboard"
                render={props => {
                    return userLogged.isLogged ? <Dashboard {...props} /> : <LoginPage />;
                }}
            />

提前致谢

标签： reactjsreact-reduxreact-routerionic4ionic-react

reactjs - 减速器在 IonRouterOutlet 内无法正常工作

问题描述

解决方案

推荐阅读