react.js實現(xiàn)頁面登錄跳轉(zhuǎn)示例
更新時間：2023年01月31日 09:38:08 作者：kalinux
本文主要介紹了react.js實現(xiàn)頁面登錄跳轉(zhuǎn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
1，頁面目錄信息：
2，從index.js導入路由信息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'; //導入react-router-dom組件
import App from '../App'; //導入頁面
import StatisticsInformation from '../firstpage/StatisticsInformation'; //導入頁面
import createBrowserHistory from "history/createBrowserHistory"; //導入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頁面進行登錄驗證，驗證函數(shù)也在這里，實現(xiàn)校驗成功后跳轉(zhuǎn)：
class Login ? extends ? React.Component{
? ? ?submitFun(username,password){ ? ? ? ? ? ?//登錄驗證函數(shù) ? ? ? ? ?
? var ?newpage = this.props.newpage; ? ? ? ? ?//跳轉(zhuǎn)的目標頁面
?this.props.history.push(newpage); ? ? ? ? ?//實現(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實現(xiàn)頁面登錄跳轉(zhuǎn)示例的文章就介紹到這了,更多相關(guān)react.js登錄跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了React中DOM事件和狀態(tài)介紹，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下2022-08-08
React 中淺比較的概念無處不在，它在不同的流程中起著關(guān)鍵的作用，本文主要介紹了React 中的淺比較是如何工作的，具有一定的參考價值，感興趣的可以了解一下2022-04-04
在這篇文章中,我將帶著大家一起探究React中使用dnd-kit實現(xiàn)拖曳排序功能,由于前陣子需要在開發(fā) Picals 的時候,需要實現(xiàn)一些拖動排序的功能,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2024-06-06
這篇文章主要為大家介紹了react native圖片解析流程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了對react中間件的理解,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
解決React報錯Unexpected default export of an
這篇文章主要為大家介紹了React報錯Unexpected default export of anonymous function解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要給帶大家搞清楚react hooks的類型聲明，如果有同學還不清楚react hooks的類型聲明，來看本文就對了，文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-07-07
在APP中免不了要使用tab組件,有的是tab切換,也有的是tab分類切換.這篇文章主要介紹了react-native動態(tài)切換tab組件的方法，非常具有實用價值，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了react-router-dom?降低版本的兩種方法,本篇文章就記錄下如何降低 react-router-dom 為 v5 版本的兩種方法，需要的朋友可以參考下2022-12-12
React實現(xiàn)數(shù)字滾動組件numbers-scroll的示例詳解
數(shù)字滾動組件，也可以叫數(shù)字輪播組件，這個名字一聽就是非常普通常見的組件。本文將利用React實現(xiàn)這一組件，感興趣的小伙伴可以了解一下2023-03-03