How to redirect to another page with the function component in reactjs Login Validation?

Question

I just want to know then when i return redirect link the it dose not working properly please as soon as possible give me suggestion. It would be great if anybody could figure out where i did mistake.

import React, { useState } from 'react';
    import { Form, Button } from 'react-bootstrap';
    import { Redirect } from 'react-router-dom';
    
    const AdminLogin = () => {
    
        const [userName, setUserName] = useState("");
        const [password, setPassword] = useState("");
    
        const submitForm = (e) => {
            e.preventDefault();
            if (userName === "rajpreet" && password === "123") {
                alert("abd");
                return <Redirect to="/AdminPanel" />
            } else {
                alert("Credentials Error");
            }
        }
        return (
            <>
                <Form onSubmit={submitForm} >
                            <h3 className="text-dark text-center mb-3">Thrill Hiker</h3>
                            <Form.Group controlId="formBasicEmail">
                                <Form.Label>User Name</Form.Label>

                                <Form.Control name="username" value={userName} onChange={(e) => { setUserName(e.target.value) }} className="adminUser" type="text" placeholder="User Name" />

                                <Form.Text className="text-muted">
                                    We'll never share your User Name with anyone else.
                                </Form.Text>
                            </Form.Group>

                            <Form.Group controlId="formBasicPassword">
                                <Form.Label>Password</Form.Label>

                                <Form.Control name="password" value={password} onChange={(e) => { setPassword(e.target.value) }} className="adminPassword" type="password" placeholder="Password" />

                            </Form.Group>
                            <Button variant="primary" type="submit">Submit</Button>
                        </Form>
            </>
        );
    
    }
    
    
    export default AdminLogin;

question from:https://stackoverflow.com/questions/66047089/how-to-redirect-to-another-page-with-the-function-component-in-reactjs-login-val

Answer 1

Waitting for answers