React实现简单登录

一        实现效果(样式是之前设置的）

二        具体实现代码

2.1        Login.js

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

2.2        Home.js

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

export default  Home

三        代码解析

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

这段代码是定义了一个`navigate`常量，它是通过调用`useNavigate` hook来创建的。`useNavigate` hook是React Router提供的一个函数，用于在React组件中导航到不同的路径。

然后，代码定义了一个`handLogin`函数来处理登录操作。在这个函数内部，它调用了`navigate`函数，并传入了两个参数：路径`"/home"`和一个配置对象`{replace:true}`。这个配置对象的作用是将新的路径加入到历史记录中，而不是在历史记录中创建一个新的条目。

最后，当调用`handLogin`函数时，它会将用户导航到路径`"/home"`，并且会使用配置对象中指定的方式进行导航。

关于const

在React中，const是用来声明一个常量的关键字。常量是一个具有固定值的标识符，它的值在声明后不能被修改。

在React中，使用const关键字可以创建一个不可变的变量，这意味着变量的值在声明后不能被重新赋值。这对于定义一些固定的值、配置信息、常用的函数等非易变的内容非常有用。

navigate("/home",{replace:true}

`navigate("/home", {replace: true})` 是使用 `react-router-dom` 包中的 `useNavigate` hook 进行页面导航的一种方式。

在这个例子中，`navigate` 函数将会根据指定的路径进行页面导航。 `"/home"` 是目标页面的路径。`{replace: true}` 是一个可选的配置对象，用于指定导航行为。`replace` 设置为 `true` 表示使用替换导航，即将当前的页面替换为目标页面，而不是添加一个新的历史记录。

使用 `replace` 导航相当于使用 `history.replace` 进行页面导航，这意味着在导航后，用户无法通过浏览器的后退按钮返回到上一个页面，而是直接跳转到目标页面。

需要注意的是：`useNavigate` hook 只能在 `react-router-dom` 的 `v6` 版本或更高版本中使用。如果项目中使用的是 `v5` 版本或更低版本的 `react-router-dom`，则需要使用 `useHistory` hook 来实现类似的导航功能。

例子中的 `handLogin` 函数使用 `navigate` 函数进行页面导航，当登录操作完成后，通过 `replace` 导航到目标页面 `/home`。