react.js實(shí)現(xiàn)頁面登錄跳轉(zhuǎn)示例
更新時間：2023年01月31日 09:38:08 作者：kalinux
本文主要介紹了react.js實(shí)現(xiàn)頁面登錄跳轉(zhuǎn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
1，頁面目錄信息：
2，從index.js導(dǎo)入路由信息BasicRoute.js，然后BasicRoute.js中存儲App.js和StatisticsInformation.js頁面信息，從App.js登錄成功后跳轉(zhuǎn)到StatisticsInformation.js頁面。
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)入頁面
import StatisticsInformation from '../firstpage/StatisticsInformation'; //導(dǎo)入頁面
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}/> //注冊組件
<Route exact path="/firstpage/StatisticsInformation" component={StatisticsInformation}/> //注冊組件
</Switch>
</HashRouter>
);
export default BasicRoute;
5， App.js頁面：
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。因為子組件不具備history屬性。
? ? ? ? ? ? </div>
? ? ? ? );}}6，Login.js頁面進(jìn)行登錄驗證，驗證函數(shù)也在這里，實(shí)現(xiàn)校驗成功后跳轉(zhuǎn)：
class Login ? extends ? React.Component{
? ? ?submitFun(username,password){ ? ? ? ? ? ?//登錄驗證函數(shù) ? ? ? ? ?
? var ?newpage = this.props.newpage; ? ? ? ? ?//跳轉(zhuǎn)的目標(biāo)頁面
?this.props.history.push(newpage); ? ? ? ? ?//實(shí)現(xiàn)跳轉(zhuǎn)
? ? ? ? ?} ; ?
?render(){ ? ? ??
? ? ? return(
? ? ? ? ?<Form ?onSubmit={(username,password)=>this.submitFun(username,password)} > ? //登錄的時候觸發(fā)函數(shù)
? ? ? ? </Form>
? ? ? ?) }
}7,哦，別忘了：
npm ?install ?react-router-dom npm ?intall ? history
到此這篇關(guān)于react.js實(shí)現(xiàn)頁面登錄跳轉(zhuǎn)示例的文章就介紹到這了,更多相關(guān)react.js登錄跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解react中useCallback內(nèi)部是如何實(shí)現(xiàn)的
前幾天有人在問在useCallback函數(shù)如果第二個參數(shù)為空數(shù)組, 為什么拿不到最新的state值，那么這一章就來分析一下useCallback內(nèi)部是如何實(shí)現(xiàn)的，感興趣的小伙伴跟著小編一起來學(xué)習(xí)吧2023-07-07
React 組件渲染和更新的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了React-組件渲染和更新的實(shí)現(xiàn)代碼示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要為大家詳細(xì)介紹了react封裝全局彈框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了創(chuàng)建React項目并配置webpack,在這里需要注意，Create?React?App?requires?Node?14?or?higher.需要安裝高版本的node，本文給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-01-01
這篇文章主要介紹了React中key的作用，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
詳解React如何實(shí)現(xiàn)代碼分割Code Splitting
這篇文章主要為大家介紹了React如何實(shí)現(xiàn)代碼分割Code Splitting示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
教你快速搭建 React Native 開發(fā)環(huán)境
這篇文章主要介紹了搭建 React Native 開發(fā)環(huán)境的詳細(xì)過程,本文通過圖文指令給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
構(gòu)建高性能?React?應(yīng)用程序的關(guān)鍵之一是避免不必要的重新渲染,React?的渲染引擎是高效的,但防止在不需要的地方重新渲染仍然至關(guān)重要,在這篇文章中,我們將介紹常見錯誤以及如何避免它們,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了使用React.forwardRef傳遞泛型參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
TypeScript 實(shí)際上就是具有強(qiáng)類型的 JavaScript,可以對類型進(jìn)行強(qiáng)校驗,好處是代碼閱讀起來比較清晰,代碼類型出現(xiàn)問題時,在編譯時就可以發(fā)現(xiàn),而不會在運(yùn)行時由于類型的錯誤而導(dǎo)致報錯,這篇文章主要介紹了ReactJS中使用TypeScript的方法,需要的朋友可以參考下2024-04-04