欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

react.js實(shí)現(xiàn)頁(yè)面登錄跳轉(zhuǎn)示例

 更新時(shí)間:2023年01月31日 09:38:08   作者:kalinux  
本文主要介紹了react.js實(shí)現(xiàn)頁(yè)面登錄跳轉(zhuǎn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1,頁(yè)面目錄信息:

2,從index.js導(dǎo)入路由信息BasicRoute.js,然后BasicRoute.js中存儲(chǔ)App.js和StatisticsInformation.js頁(yè)面信息,從App.js登錄成功后跳轉(zhuǎn)到StatisticsInformation.js頁(yè)面。

3,index.js略

4,BasicRoute.js

import React from 'react';
import {HashRouter, Route, Switch,hashHistory} from 'react-router-dom';       //導(dǎo)入react-router-dom組件
import App from '../App';                                                     //導(dǎo)入頁(yè)面
import StatisticsInformation from '../firstpage/StatisticsInformation';       //導(dǎo)入頁(yè)面
import createBrowserHistory from "history/createBrowserHistory";              //導(dǎo)入history包
const customHistory = createBrowserHistory();                                 //創(chuàng)建
const BasicRoute = () => (
        <HashRouter history={customHistory}>    //給路由添加屬性history,這樣父組件就可以調(diào)用this.props.history.push
        <Switch>
            <Route exact path="/" component={App}/>   //注冊(cè)組件
            <Route exact path="/firstpage/StatisticsInformation" component={StatisticsInformation}/>   //注冊(cè)組件
        </Switch>
      </HashRouter>
);
export default BasicRoute;

5, App.js頁(yè)面:

export ?default ?class ?App ?extends ? React.Component{
?render(){
? ? ? ? return (
? ? ? ? ? ? <div className="back">
? ? ? ? ? ? ? <Login ?history={this.props.history} url='http://www.baidu.com' /> ?//將this.props.history作為屬性傳遞給子組件Login。因?yàn)樽咏M件不具備history屬性。
? ? ? ? ? ? </div>
? ? ? ? );}}

6,Login.js頁(yè)面進(jìn)行登錄驗(yàn)證,驗(yàn)證函數(shù)也在這里,實(shí)現(xiàn)校驗(yàn)成功后跳轉(zhuǎn):

class Login ? extends ? React.Component{
? ? ?submitFun(username,password){ ? ? ? ? ? ?//登錄驗(yàn)證函數(shù) ? ? ? ? ?
? var ?newpage = this.props.newpage; ? ? ? ? ?//跳轉(zhuǎn)的目標(biāo)頁(yè)面
?this.props.history.push(newpage); ? ? ? ? ?//實(shí)現(xiàn)跳轉(zhuǎn)
? ? ? ? ?} ; ?

?render(){ ? ? ??
? ? ? return(
? ? ? ? ?<Form ?onSubmit={(username,password)=>this.submitFun(username,password)} > ? //登錄的時(shí)候觸發(fā)函數(shù)
? ? ? ? </Form>
? ? ? ?) }
}

7,哦,別忘了:

npm ?install ?react-router-dom
npm ?intall ? history

到此這篇關(guān)于react.js實(shí)現(xiàn)頁(yè)面登錄跳轉(zhuǎn)示例的文章就介紹到這了,更多相關(guān)react.js登錄跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 詳解react中useCallback內(nèi)部是如何實(shí)現(xiàn)的

    詳解react中useCallback內(nèi)部是如何實(shí)現(xiàn)的

    前幾天有人在問(wèn)在useCallback函數(shù)如果第二個(gè)參數(shù)為空數(shù)組, 為什么拿不到最新的state值,那么這一章就來(lái)分析一下useCallback內(nèi)部是如何實(shí)現(xiàn)的,感興趣的小伙伴跟著小編一起來(lái)學(xué)習(xí)吧
    2023-07-07
  • React 組件渲染和更新的實(shí)現(xiàn)代碼示例

    React 組件渲染和更新的實(shí)現(xiàn)代碼示例

    這篇文章主要介紹了React-組件渲染和更新的實(shí)現(xiàn)代碼示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-02-02
  • react封裝全局彈框的方法

    react封裝全局彈框的方法

    這篇文章主要為大家詳細(xì)介紹了react封裝全局彈框的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • 快速創(chuàng)建React項(xiàng)目并配置webpack

    快速創(chuàng)建React項(xiàng)目并配置webpack

    這篇文章主要介紹了創(chuàng)建React項(xiàng)目并配置webpack,在這里需要注意,Create?React?App?requires?Node?14?or?higher.需要安裝高版本的node,本文給大家介紹的非常詳細(xì),需要的朋友參考下吧
    2022-01-01
  • 詳解React中key的作用

    詳解React中key的作用

    這篇文章主要介紹了React中key的作用,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下
    2021-04-04
  • 詳解React如何實(shí)現(xiàn)代碼分割Code Splitting

    詳解React如何實(shí)現(xiàn)代碼分割Code Splitting

    這篇文章主要為大家介紹了React如何實(shí)現(xiàn)代碼分割Code Splitting示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • 教你快速搭建 React Native 開(kāi)發(fā)環(huán)境

    教你快速搭建 React Native 開(kāi)發(fā)環(huán)境

    這篇文章主要介紹了搭建 React Native 開(kāi)發(fā)環(huán)境的詳細(xì)過(guò)程,本文通過(guò)圖文指令給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • React避免不必要的重新渲染的方法示例

    React避免不必要的重新渲染的方法示例

    構(gòu)建高性能?React?應(yīng)用程序的關(guān)鍵之一是避免不必要的重新渲染,React?的渲染引擎是高效的,但防止在不需要的地方重新渲染仍然至關(guān)重要,在這篇文章中,我們將介紹常見(jiàn)錯(cuò)誤以及如何避免它們,需要的朋友可以參考下
    2024-10-10
  • 使用React.forwardRef傳遞泛型參數(shù)

    使用React.forwardRef傳遞泛型參數(shù)

    這篇文章主要介紹了使用React.forwardRef傳遞泛型參數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • ReactJS中使用TypeScript的方法

    ReactJS中使用TypeScript的方法

    TypeScript 實(shí)際上就是具有強(qiáng)類(lèi)型的 JavaScript,可以對(duì)類(lèi)型進(jìn)行強(qiáng)校驗(yàn),好處是代碼閱讀起來(lái)比較清晰,代碼類(lèi)型出現(xiàn)問(wèn)題時(shí),在編譯時(shí)就可以發(fā)現(xiàn),而不會(huì)在運(yùn)行時(shí)由于類(lèi)型的錯(cuò)誤而導(dǎo)致報(bào)錯(cuò),這篇文章主要介紹了ReactJS中使用TypeScript的方法,需要的朋友可以參考下
    2024-04-04

最新評(píng)論