Having trouble routing to next page after button click

Hi,
Need help routing to another page. I have page that enter user profile to firestore database and once Submit page will route to next page (WelcomePage.jsx). Unfortunaltey routing is not happening.
Below are my coding:
ProfilePage.jsx

import React,{useState} from 'react'
import {auth} from '../firebaseconfig';
import { person,calendarNumber,location} from 'ionicons/icons';
import '../components/stylesheet.css';
import {IonContent,IonPage,IonLabel,IonCard,IonList,IonItem,IonIcon,
    IonInput,IonButton,IonHeader,IonToolbar,IonTitle,IonSelect,IonSelectOption } from '@ionic/react';
import { useAuth } from '../auth';
import { firestore } from '../firebaseconfig';
import { useForm } from 'react-hook-form';
import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import WelcomePage from './WelcomePage';
import { Redirect } from 'react-router';

export default function ProfilePage(){
      const { loggedIn } = useAuth();
      const validationSchema = Yup.object().shape({
        fullname: Yup.string()
            .required('Enter Name'),
        age: Yup.string()
            .required('Enter Age'),
        gender: Yup.string()
            .required('Select Gender'),
        location: Yup.string()
            .required('Enter Location')
      });
      const formOptions = {resolver: yupResolver(validationSchema)} 
      const { register, handleSubmit, reset, formState } = useForm(formOptions);
      const { errors } = formState;
    
      const [patName, setPatName]=useState(''); 
      const [patAge, setPatAge]=useState('');
      const [patGender, setPatGender]=useState('');
      const [patLocation, setPatLocation]=useState('');
      const patPhoneNumber = auth.currentUser.phoneNumber.toString();
    //   const handleSave = async () => {
    //     const userData = {patAge, patName, patGender,patLocation,patPhoneNumber};
    //     const usersRef = firestore.collection('pat_profile').doc(auth.currentUser.uid).set({userData});
    //   };
      const onSubmit = (data, e) => {
        const {fullname,age,gender,location}= data;
        const userData = {fullname,age,gender,location,patPhoneNumber};
        firestore.collection('pat_profile').doc(auth.currentUser.uid).set({fullname,age,gender,location,patPhoneNumber});
        return <Redirect to= "WelcomePage" />;
  }
    };
     
      const onError = (errors, e) => console.log(errors, e);
    return (
        <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonTitle className="profileheader">Profile Details</IonTitle>
                </IonToolbar>
            </IonHeader>   
            <IonContent className="ion-padding ion-content">
                <form onSubmit={handleSubmit(onSubmit, onError)}>
                <IonCard className="card-profile">
                    <IonList>
                        <IonItem className="item-background-color item-text">
                            <IonInput autofocus name="fullname" 
                                placeholder="Enter Name" required {...register("fullname")}
                                value={patName} onIonChange={(event) => setPatName(event.detail.value)}
                            />
                            <IonIcon icon={person} />
                        </IonItem>
                    </IonList>
                    <IonList>
                        <IonItem className="item-background-color item-text">
                            <IonInput type="number" required name="age"
                                placeholder="Age" {...register("age")}
                                value={patAge} onIonChange={(event) => setPatAge(event.detail.value)}
                                />
                            <IonIcon icon={calendarNumber} />
                        </IonItem>
                    </IonList>
                    <IonList>
                        <IonItem className="item-background-color item-text"> 
                        <IonLabel>Gender</IonLabel>
                            <IonSelect required placeholder="Select" value={patGender} interface="popover" name="gender" {...register("gender")}
                                onIonChange={(event) => setPatGender(event.detail.value)}>
                                <IonSelectOption value="Female">Female</IonSelectOption>
                                <IonSelectOption value="Male">Male</IonSelectOption>
                            </IonSelect>
                        </IonItem>
                    </IonList>
                    <IonList lines="none">
                        <IonItem className="item-background-color item-text"> 
                            <IonInput
                                placeholder="Location" required {...register("location")} name="location"
                                value={patLocation} onIonChange={(event) => setPatLocation(event.detail.value)}
                                />
                            <IonIcon icon={location} />
                        </IonItem>
                    </IonList>
                </IonCard>
                <IonButton className="item-button-reg ion-color-button" size="default" expand="block" type="submit" > REGISTER</IonButton>
                </form>
            </IonContent>
        </IonPage>
    );
}

WelcomePage.jsx

import React from "react";
import {auth} from '../firebaseconfig';
import { person,calendarNumber,location} from 'ionicons/icons';
import '../components/stylesheet.css';
import {IonContent,IonPage,IonLabel,IonCard,IonList,IonItem,IonIcon,
    IonInput,IonButton,IonHeader,IonToolbar,IonTitle,IonSelect,IonSelectOption } from '@ionic/react';

export default function WelcomePage(){

        return(
            <IonPage>
                <IonContent className="ion-padding phreg-content">
                <IonLabel>Welcome</IonLabel>

                </IonContent>

            </IonPage>

        );


}

1 post - 1 participant

Read full topic