React实现简单登录

亦凉 2024-02-05 21:02 27阅读 0赞

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

![caca179f8a254e3e91c043d98bb8b4d0.png][]

## 二 具体实现代码 ##

### 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\`。

[caca179f8a254e3e91c043d98bb8b4d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/683af262e4694df0b46b91cf663d4538.png