Having trouble routing to next page after button click - ionic-framework

Question

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).
Adding to Firestore database is working fine but the routing to next page is failing after click on the submiting button. I don't receive any error in the console log.
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>
);
}

Answer 1

I think.. may be you have problem or grammar error.
First, exist WelcomePage path in Route?
<Route path="/WelcomePage" component={WelcomePage}/>
And, Why don't you use <Router /> ?
example these.
<Router>
<Switch>
<PrivateRoute exact path="/" component={Home} />
<Route path="/users/sign_in" component={SingIn}/>
<Route path="/users/sign_up" component={SignUp}/>
</Switch>
</Router>
Or use this.
<Redirect to={{
pathname: '/WelcomePage'
}}/>