Reducer 在 IonRouterOutlet 内部无法正常工作

Question

这是我的 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);

这是我的登录页面组件：

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 />;
                }}
            />

提前致谢

Answer 1

最新版本之一修复了一个错误，刷新了为路线创建的闭包。将@ionic/react 和@ionic/react-router 升级到版本4.11.8 后，我可以确认错误已修复。还必须更新 @types/react 到 16.9.19，并将 @types/react-router 更新到 5.1.4，以避免 this

等问题

Reducer 在 IonRouterOutlet 内部无法正常工作

Reducer not working properly inside IonRouterOutlet

reactjs

react-router

react-redux

ionic4

ionic-react