React CRUD系统Login组件报错及头部导航问题求助

问题1：Login.js出现React.jsx类型无效错误 #

问题原因 #

错误定位在Login.js第36行附近，核心问题有两个：

1. 使用了未定义的组件：semantic-ui-react提供的表单字段组件是Form.Field（大写F），代码中误写为Form.field（小写f），导致React识别到undefined类型的组件；
2. 表单事件绑定错误：将表单提交事件onSubmit误写为onCLick（拼写错误），且原逻辑中的用户名密码验证逻辑无效（username !== username永远为false）。

修复后代码 #

import React, { useState } from 'react'
import { Button, Form } from 'semantic-ui-react'
import axios from 'axios'
import { useNavigate } from 'react-router'

export default function Login() {
    let navigate = useNavigate()

    const[username, setusername] = useState('');
    const[Employee_password, setEmployee_password] = useState('');
    
    const GetData = (e) =>{
         e.preventDefault();
        console.log(username, Employee_password)

    // 修复验证逻辑：先判断输入是否为空
    if(!username || !Employee_password)
    {
        alert('请输入用户名和密码!')
        return false
    }
    axios.post('http://localhost:5000/emp/login',{
        username,
        Employee_password
    }).then((res)=>{
        console.log('登录成功')
        navigate('/read')
    }).catch(err=>{
        console.log(err)
        alert('用户名或密码错误')
    })
    }
return(
    <div>
        <Form onSubmit={GetData}>
        <h2>登录已有账号</h2>
        <Form.Field>
            <label>输入用户名</label>
            <input type='text' placeholder='用户名' onChange={(e) => setusername(e.target.value)}></input>
        </Form.Field>
        <Form.Field>
            <label>密码</label>
            <input type='password' placeholder='密码' onChange={(e) => setEmployee_password(e.target.value)}></input>
        </Form.Field>
        <Button type='submit'>登录</Button>
        </Form>
    </div>
 )
}

问题2：头部导航功能无法正常使用 #

问题原因 #

1. 未导入React Router的Link组件，且导航链接代码被注释；
2. 头部导航位于BrowserRouter组件外部，React Router的导航组件必须在路由上下文内部才能生效；
3. React中应使用className替代原生HTML的class属性。

修复后代码 #

import './App.css';
import Create from './components/create';
import Read from './components/read';
import Update from './components/update';
import Login from './components/login';
import { Routes, Route, Link } from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';

function App() {
  return ( 
    <BrowserRouter>
      <div>
        <header>
          <h1 className='header1'>Aman Enterprises</h1>
          <nav className='nav'>
            <ul>
              <li><Link to='/login'>登录</Link></li>
              <li><Link to='/create'>注册</Link></li>
            </ul>
          </nav>
        </header>
        <div className="main">
          <Routes>
            <Route path="/" element={<Create />} />
            <Route path="login" element={<Login />} />
            <Route path="read" element={<Read />} />
            <Route path="update" element={<Update />} />
          </Routes>
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;

额外优化提示 #

• Create.js中navigate('/Login')需改为navigate('/login')，保持路由路径大小写一致；
• Create.js中表单同时绑定了onSubmit和按钮的onClick，建议只保留onSubmit避免重复触发；
• Update.js中Employee_id+""可直接写为Employee_id，React会自动处理类型转换；
• 表单验证逻辑可封装为独立函数，提升代码可读性。

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