Why doesn't my React app redirect after login?-CodePudding

I'm new to React and Typescript and what I'm trying to do is, after successfully logging in I want to redirect the user to the homepage, but navigate doesn't seem to work.

Here is my login component:

function Login() {
    const auth = useRecoilValue(authAtom);
    const { register, handleSubmit, formState } = useForm<IFormValues>();
    const navigate = useNavigate();
    const { isSubmitting } = formState;
    console.log(isSubmitting);

    function onSubmit(values: IFormValues ) {
        const baseUrl = `${process.env.REACT_APP_API_URL}/users/authenticate`;

        const creds = {
            Username: values.username,
            Password: values.password
        };

        return authenticateApi(baseUrl, creds)
            .then(X => {
                navigate('/');    
            });
    }

    useEffect(() => {
        // redirect to home if already logged in
        if (auth) navigate('/');
    }, []);

    return (
        <div className="col-md-6 offset-md-3 mt-5">
            <div className="card">
                <h4 className="card-header">Login</h4>
                <div className="card-body">
                    <form onSubmit={handleSubmit(onSubmit)}>
                        <div className="form-group">
                            <label>Username</label>
                            <input type="text" {...register("username")} className={`form-control`} />
                            <div className="invalid-feedback"></div>
                        </div>
                        <div className="form-group">
                            <label>Password</label>
                            <input type="password" {...register("password")} className={`form-control`} />
                            <div className="invalid-feedback"></div>
                        </div>
                        <button disabled={isSubmitting} className="btn btn-primary">
                            {isSubmitting && <span className="spinner-border spinner-border-sm mr-1"></span>}
                            Login
                        </button>                       
                    </form>
                </div>
            </div>
        </div>
    )
}

I have been stuck on this for a while, so any help would be greatly appreciated.

CodePudding user response：

Do you ever actually import useNavigate()? It comes from the react-router-dom package, and can be used like so:

import { useNavigate } from 'react-router-dom';

function Login() {
    // ...
    const navigate = useNavigate();
    // ...
}

CodePudding user response：

Try this one it might work! or you can create a new function to redirect user to homepage after login

 import { useNavigate } from "react-router-dom";    
    
    function Login() {
            //This is for navifating user to home page
            const navigate = useNavigate();

            const auth = useRecoilValue(authAtom);
            const { register, handleSubmit, formState } = useForm<IFormValues>();
          
            const { isSubmitting } = formState;
            console.log(isSubmitting);
        
            const onSubmit = (values: IFormValues ) => {
                const baseUrl = `${process.env.REACT_APP_API_URL}/users/authenticate`;
        
                const creds = {
                    Username: values.username,
                    Password: values.password
                };
        
                return authenticateApi(baseUrl, creds)
                    .then(X => {
                        navigate('/');    
                    });
            }
        
            const auth = () => {
                // redirect to home if already logged in
              navigate('/');
            };
        
            return (
                <div className="col-md-6 offset-md-3 mt-5">
                    <div className="card">
                        <h4 className="card-header">Login</h4>
                        <div className="card-body">
                            <form onSubmit={handleSubmit(onSubmit)}>
                                <div className="form-group">
                                    <label>Username</label>
                                    <input type="text" {...register("username")} className={`form-control`} />
                                    <div className="invalid-feedback"></div>
                                </div>
                                <div className="form-group">
                                    <label>Password</label>
                                    <input type="password" {...register("password")} className={`form-control`} />
                                    <div className="invalid-feedback"></div>
                                </div>
                                <button disabled={isSubmitting} className="btn btn-primary">
                                    {isSubmitting && <span className="spinner-border spinner-border-sm mr-1"></span>}
                                    Login
                                </button>                       
                            </form>
                        </div>
                    </div>
                </div>
            )
        }