react.js實(shí)現(xiàn)頁面登錄跳轉(zhuǎn)示例
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-07React 組件渲染和更新的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了React-組件渲染和更新的實(shí)現(xiàn)代碼示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02詳解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