重定向在验证离子反应时显示不同的组件。

Question

我是一个相当新的Ionic React和试图创建一个App使用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 在点击登录按钮时调用。我试过 通读离子文档 但这并没有帮助，因为每当有按钮点击或点击IonLabel等IonElement时，它就会重定向。

Answer 1

用例 反应路由器域名 钩子https:/reacttraining.comreact-routerwebapiHooksusehistory。

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();
    }
}

谢谢你