减速器在离子路由器插座内无法正常工作

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>呈现给"仪表板"组件，但组件"仪表板"的受保护路径没有检测到它(至少看起来是这样(。 如果我将受保护的路由放在"离子路由器出口"之外，它可以完美地工作。但是我需要它在"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/反应更新到 16.9.19，并将 @types/react-router 更新到 5.1.4，以避免出现这样的问题