一 、實現(xiàn)效果(樣式是之前設(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>登錄頁面</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

三、代碼解析

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

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

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

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

關(guān)于const

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

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

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

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

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

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

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

例子中的 `handLogin` 函數(shù)使用 `navigate` 函數(shù)進行頁面導(dǎo)航，當(dāng)?shù)卿洸僮魍瓿珊?，通過 `replace` 導(dǎo)航到目標頁面 `/home`。

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

最新評論