Redirecting/Rendering 验证后的不同成分离子反应

Question

我是 Ionic React 的新手，正在尝试使用 Ionic 框架创建应用程序。我有一个用例，我想在按下按钮并从函数验证后重定向到另一个页面。

这是我正在使用的组件

import React, { useState } from 'react';
import {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonInput,
    IonButton,
    IonRow,
    IonCol,
    useIonViewWillEnter,
    useIonViewWillLeave,
    IonLabel
} from '@ionic/react';

import './LogIn.css'
import MainMenu from "../MainMenu";

const LogIn: React.FC<{register?: boolean; onClose?: any}> = () => {

    const [email, setEmail] = useState<string>();
    const [password, setPassword] = useState<string>();

    function handleLoginButtonPress() {
        if (validateEmail() && password !== undefined && password.trim() !== "") {
            // Network call here to check if a valid user
            console.log("valid email")
            return <MainMenu/>
        }
    }
    function validateEmail () {
        if (email !== undefined && email.trim() !== "") {
            const regexp = /^(([^<>()[\]\.,;:\s@"]+(\.[^<>()[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return regexp.test(email);
        }
        return false;
    }

    useIonViewWillEnter(() => {
        console.log("Entering LogIn");
    });

    useIonViewWillLeave(() => {
        console.log("Exiting LogIn");
    });

    return (
        <IonPage id="loginIonPage">
            <IonHeader>
                <IonToolbar color="primary" mode="md">
                    <IonTitle class="ion-text-center">Login or Register</IonTitle>
                </IonToolbar>
            </IonHeader>

            <IonContent id="loginPage">
                <div id="loginDialog">
                    <form>
                        <IonLabel>Email</IonLabel>
                        <IonRow>
                            <IonCol id="userName">
                                <IonInput
                                    name="email"
                                    value={email}
                                    onIonChange={e => setEmail(e.detail.value!)}
                                    clearInput
                                    type="email"
                                    placeholder="Email"
                                    class="input"
                                    padding-horizontal
                                    clear-input="true"
                                    required/>
                            </IonCol>
                        </IonRow>
                        <IonLabel>Password</IonLabel>
                        <IonRow>
                            <IonCol id="password">
                                <IonInput
                                    clearInput
                                    name="password"
                                    value={password}
                                    onIonChange={e => setPassword(e.detail.value!)}
                                    type="password"
                                    placeholder="Password"
                                    class="input"
                                    padding-horizontal
                                    clear-input="true"
                                    required/>
                            </IonCol>
                        </IonRow>
                    </form>
                </div>
                <div id="buttons">
                        <IonButton
                            onClick={handleLoginButtonPress}
                            type="submit"
                            strong={true}
                            expand="full"
                            style={{ margin: 20 }}>
                            Log in
                        </IonButton>
                        <IonButton
                            routerLink="/registerUser"
                            type="submit"
                            strong={true}
                            expand="full"
                            style={{ margin: 20 }}>
                            Register
                        </IonButton>
                </div>
            </IonContent>
        </IonPage>
    );
};

export default LogIn;

如何从单击“登录”按钮时调用的函数 handleLoginButtonPress 重定向到另一个页面。我尝试了 reading through ionic doc 但这没有帮助，因为只要单击按钮或单击像 IonLabel 这样的 IonElement，它就会重定向。

Answer 1

使用react-router-dom hooks https://reacttraining.com/react-router/web/api/Hooks/usehistory

import { useHistory } from "react-router-dom";
const ExampleComponent: React.FC = () => {
  const history = useHistory();

  const handleLoginButtonPress = () => {
    history.push("/main");
  };

  return <IonButton onClick={handleLoginButtonPress}>Log in</IonButton>;
};
export default ExampleComponent;

Answer 2

谢谢，@MUHAMMAD ILYAS，它对我有用。但是我设法利用了如下的反应状态，我添加了一个答案，因为我无法在那里格式化代码，

const ValidateUser : React.FC = () => {

    const [login, setLogin] = useState(false);

    function isUserLoggedIn() {
        return login;
    }

    return(
        <IonReactRouter>
            <IonRouterOutlet>
                <Route path="/" render={() => isUserLoggedIn()
                    ? <MainMenu/>
                    : <LogIn setUserLoggedIn={() => {setLogin(true)}}/>} exact={true}/>
            </IonRouterOutlet>
        </IonReactRouter>
    );
};

const LogIn: React.FC<{setUserLoggedIn?: any}> = ({setUserLoggedIn}) => {
    .
    .
    function onLoginButtonPress() {
       setUserLoggedIn();
    }
}

谢谢

Redirecting/Rendering 验证后的不同成分离子反应

Redirecting/Rendering different component upon validation ionic react

ionic-framework

ionic4

ionic-react