一 、實(shí)現(xiàn)效果(樣式是之前設(shè)置的）

二 、具體實(shí)現(xiàn)代碼

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>登錄頁(yè)面</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>電話號(hào)碼</span><input type={'text'} name={'電話號(hào)碼'} placeholder={"電話號(hào)碼"} required/><br/>
                <button onClick={handLogin}>登錄</button>
                <button>重置</button>
                <ul>
                     <li>
                        <a href={'#'}>沒有賬號(hào)？</a>
                        <a href={'#'}>注冊(cè)?</a>
                        <a href={'#'}>忘記密碼？</a>
                    </li>
                </ul>
        </div>
    )
}
export default Login

2.2、Home.js

function Home(){
    return(
        <h1>首頁(yè)中心頁(yè)面</h1>
    )
}

export default  Home

三、代碼解析

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

這段代碼是定義了一個(gè)`navigate`常量，它是通過調(diào)用`useNavigate` hook來創(chuàng)建的。`useNavigate` hook是React Router提供的一個(gè)函數(shù)，用于在React組件中導(dǎo)航到不同的路徑。

然后，代碼定義了一個(gè)`handLogin`函數(shù)來處理登錄操作。在這個(gè)函數(shù)內(nèi)部，它調(diào)用了`navigate`函數(shù)，并傳入了兩個(gè)參數(shù)：路徑`"/home"`和一個(gè)配置對(duì)象`{replace:true}`。這個(gè)配置對(duì)象的作用是將新的路徑加入到歷史記錄中，而不是在歷史記錄中創(chuàng)建一個(gè)新的條目。

最后，當(dāng)調(diào)用`handLogin`函數(shù)時(shí)，它會(huì)將用戶導(dǎo)航到路徑`"/home"`，并且會(huì)使用配置對(duì)象中指定的方式進(jìn)行導(dǎo)航。

關(guān)于const

在React中，const是用來聲明一個(gè)常量的關(guān)鍵字。常量是一個(gè)具有固定值的標(biāo)識(shí)符，它的值在聲明后不能被修改。

在React中，使用const關(guān)鍵字可以創(chuàng)建一個(gè)不可變的變量，這意味著變量的值在聲明后不能被重新賦值。這對(duì)于定義一些固定的值、配置信息、常用的函數(shù)等非易變的內(nèi)容非常有用。

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

`navigate("/home", {replace: true})` 是使用 `react-router-dom` 包中的 `useNavigate` hook 進(jìn)行頁(yè)面導(dǎo)航的一種方式。

在這個(gè)例子中，`navigate` 函數(shù)將會(huì)根據(jù)指定的路徑進(jìn)行頁(yè)面導(dǎo)航。 `"/home"` 是目標(biāo)頁(yè)面的路徑。`{replace: true}` 是一個(gè)可選的配置對(duì)象，用于指定導(dǎo)航行為。`replace` 設(shè)置為 `true` 表示使用替換導(dǎo)航，即將當(dāng)前的頁(yè)面替換為目標(biāo)頁(yè)面，而不是添加一個(gè)新的歷史記錄。

使用 `replace` 導(dǎo)航相當(dāng)于使用 `history.replace` 進(jìn)行頁(yè)面導(dǎo)航，這意味著在導(dǎo)航后，用戶無法通過瀏覽器的后退按鈕返回到上一個(gè)頁(yè)面，而是直接跳轉(zhuǎn)到目標(biāo)頁(yè)面。

需要注意的是：`useNavigate` hook 只能在 `react-router-dom` 的 `v6` 版本或更高版本中使用。如果項(xiàng)目中使用的是 `v5` 版本或更低版本的 `react-router-dom`，則需要使用 `useHistory` hook 來實(shí)現(xiàn)類似的導(dǎo)航功能。

例子中的 `handLogin` 函數(shù)使用 `navigate` 函數(shù)進(jìn)行頁(yè)面導(dǎo)航，當(dāng)?shù)卿洸僮魍瓿珊螅ㄟ^ `replace` 導(dǎo)航到目標(biāo)頁(yè)面 `/home`。

到此這篇關(guān)于React實(shí)現(xiàn)簡(jiǎn)單登錄的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)React 登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論