Перенаправление / рендеринг другого компонента после проверки ioni c react

Question

Я новичок в Ioni c React и пытаюсь создать приложение с использованием фреймворка Ioni c. У меня есть вариант использования, когда я хотел бы перенаправить на другую страницу после нажатия кнопки и проверки из функции.

Вот компонент, с которым я работаю

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, которая вызывается при нажатии на кнопку «Войти». Я пробовал читать через ioni c do c, но это не помогло, так как он перенаправляется всякий раз, когда есть кнопка или щелчок по IonElement, например IonLabel.

Answer 1

Спасибо, @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();
    }
}

Спасибо

Answer 2

Используйте response-router-dom хуки 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;