React 18.x登录组件handleSubmit日志不输出及Navigate跳转失效问题

我在React 18.x中实现了一个登录组件，功能是获取用户名和密码后发送到后端验证，验证通过后通过react-router-dom跳转到指定路径。但点击登录按钮后，handleSubmit函数内的所有console.log都未在Chrome控制台输出，Navigate跳转也未触发。后端能正常收到请求，但前端完全无预期反应。

当前控制台输出：

Download the React DevTools for a better development experience: React DevTools工具提示
ELogin.js:12 from Elogin11
ELogin.js:45 before return Elogin
localhost/:1 [DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: Chromium密码表单设计文档) <input type="password" class="form-control" placeholder="密码">

登录组件原代码：

export default function ELogin () {
    console.log("from Elogin11");  //<<==Chrome控制台可见
    const [loginName, setLoginName] = useState('');
    const [password, setPassword] = useState('');
    const authVal = useContext(authContext);

    const handleSubmit = async (event) => { 
        console.log("from Elogin handleSubmit : ", event); //<<==控制台不可见
        let url = `${GLOBAL.BASE_URL}/logins?password=${encodeURIComponent(password)}&loginName=${encodeURIComponent(loginName)}`
        //let url = `${GLOBAL.BASE_URL}/express_backend`
        let obj = {
            username:loginName,
            password:password
        };
        try {
            let employee = await helper.fetchpost(url, obj); //<<==后端能收到请求
            console.log("fire up from react browser", employee); //<<==控制台不可见
            authVal.setEmpUser(employee.results);             
            //跳转逻辑未触发
            return <Navigate to="/employee" />;
        } catch(err) {
            console.log("Error in login", err);
        };
       
    };

    const handleLoginName = (event) => {
        setLoginName(event.target.value);
    };

    const handlePassword = (event) => {
        console.log("handle password : ", event.target);  //<<==Chrome控制台可见
        setPassword(event.target.value);
    };
    console.log("before return Elogin");  //<<==Chrome控制台可见
    return (
        <React.Fragment>
            <Row>
            <Col sm={true}></Col>
            <Col sm={true}>
                <Form >
                    <h3 className="text-center" >Login Page</h3>

                    <div className="form-group">
                        
                        <input type="text" className="form-control"  placeholder="登录名" onChange={handleLoginName} />
                    </div>

                    <div className="form-group">
                        
                        <input type="password" className="form-control"  placeholder="密码" onChange={handlePassword} />
                    </div>

                    <Button onClick={()=>{console.log("button clicked") //<<==控制台不可见; handleSubmit()}} type="submit" className="btn btn-primary btn-block" >Login</Button>
                
                </Form>
                </Col>
                <Col sm={true}></Col>
            </Row>
        </React.Fragment>
    );
}

问题根源 #

1. 表单默认提交行为未阻止：按钮type="submit"会触发表单默认提交，导致页面刷新，控制台日志被清空，异步逻辑还未执行完就中断。
2. handleSubmit调用失效：按钮onClick回调中，注释符号//误将handleSubmit()注释，点击按钮时根本没触发目标函数。
3. 跳转方式错误：在异步函数中返回<Navigate />组件不会触发路由跳转，该组件需在渲染阶段返回，或使用useNavigate钩子执行跳转。

修复后的代码 #

import { useState, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
// 导入其他依赖如Row、Col、Form、Button等

export default function ELogin () {
    console.log("from Elogin11");
    const [loginName, setLoginName] = useState('');
    const [password, setPassword] = useState('');
    const authVal = useContext(authContext);
    // 引入useNavigate钩子
    const navigate = useNavigate();

    const handleSubmit = async (event) => { 
        // 阻止表单默认提交，避免页面刷新
        event.preventDefault();
        console.log("from Elogin handleSubmit : ", event);
        let url = `${GLOBAL.BASE_URL}/logins?password=${encodeURIComponent(password)}&loginName=${encodeURIComponent(loginName)}`
        let obj = {
            username:loginName,
            password:password
        };
        try {
            let employee = await helper.fetchpost(url, obj);
            console.log("fire up from react browser", employee);
            authVal.setEmpUser(employee.results);             
            // 使用useNavigate执行跳转
            navigate("/employee");
        } catch(err) {
            console.log("Error in login", err);
        };
       
    };

    const handleLoginName = (event) => {
        setLoginName(event.target.value);
    };

    const handlePassword = (event) => {
        console.log("handle password : ", event.target);
        setPassword(event.target.value);
    };
    console.log("before return Elogin");
    return (
        <React.Fragment>
            <Row>
            <Col sm={true}></Col>
            <Col sm={true}>
                {/* 给表单绑定onSubmit事件 */}
                <Form onSubmit={handleSubmit}>
                    <h3 className="text-center" >Login Page</h3>

                    <div className="form-group">
                        <input type="text" className="form-control"  placeholder="登录名" onChange={handleLoginName} />
                    </div>

                    <div className="form-group">
                        <input type="password" className="form-control"  placeholder="密码" onChange={handlePassword} />
                    </div>

                    {/* 移除无效的onClick，保留type="submit"触发表单提交 */}
                    <Button type="submit" className="btn btn-primary btn-block" >Login</Button>
                
                </Form>
                </Col>
                <Col sm={true}></Col>
            </Row>
        </React.Fragment>
    );
}

内容的提问来源于stack exchange，提问作者user938363