React实现简单登录的项目实践

import {useNavigate} from "react-router-dom";
import React from "react";
// import './style2.css'

function Login(){
    const navigate=useNavigate()
    function handLogin(){
        navigate("/home",{replace:true})
    }
    return(
        <div id="Log">
                <p>登录页面</p>
                <span>用户名:</span><input type={'text'} name={'姓名'} placeholder={"姓名"} pattern="^[\u4e00-\u9fa5]+$" required/><br/>
                <span>登录密码:</span><input type={'password'} name={'密码'} placeholder={"密码"} required/><br/>
                <span>邮箱:</span><input type={'email'} name={'邮箱'} placeholder={"邮箱"} required/><br/>
                <span>年龄:</span><input type={'number'} name={'年龄'} placeholder={"年龄"} required/><br/>
                <span>电话号码</span><input type={'text'} name={'电话号码'} placeholder={"电话号码"} required/><br/>
                <button onClick={handLogin}>登录</button>
                <button>重置</button>
                <ul>
                     <li>
                        <a href={'#'}>没有账号？</a>
                        <a href={'#'}>注册?</a>
                        <a href={'#'}>忘记密码？</a>
                    </li>
                </ul>
        </div>
    )
}
export default Login

function Home(){
    return(
        <h1>首页中心页面</h1>
    )
}

export default  Home

<strong> const navigate=useNavigate()
    function handLogin(){
        navigate("/home",{replace:true})
    }</strong>