React利用路由實現登錄界面的跳轉

Posted on by

上一篇在配置好瞭webpack和react的環境後，接下來開始寫登錄界面，以及接下來的跳轉到主頁的功能。

1、首先看一下總體的目錄結構。

因為很多時候在看別人寫的例子的時候因為目錄結構不熟悉後邊會出現意想不到的岔子。

總體的目錄結構

2、大體流程：

1）webpack配置入口文件src/index.js
2）運行index.html後首先加載入口文件src/index.js
3）加載路由表src/router/index.js
4）根據路由表中的配置會首先加載登錄界面src/login.js
5）當在登錄界面登錄成功後跳轉到src/components/myView.js
6）在myView文件中點擊左側菜單會分別顯示指定頁面（都是在路由表中配置）

3、寫HTML文件。

其中，1）id為myContent處是為瞭放置我們寫的組件。
2）script中加載的文件時webpack打包後的js文件。

<body>
 <div id="myContent"></div>
 <script src="./dist/bundle.js"></script>
</body>

4、登錄界面寫在瞭login.js中

1）引入必要的模塊：antd（Ant Design ）是一個組件庫，我們項目中使用的組件都來自它。(https://ant.design/index-cn)（不引入antd.css時，那麼界面顯示不出來樣式）

import React from 'react'
import {Form,Input,Icon, Button} from 'antd'
// import {render} from 'react-dom'
// import axios from 'axios'

import '../node_modules/antd/dist/antd.css'//不引入這個文件那麼不顯示antd的樣式
import './style/login.css';

2）創建登錄表單組件。除瞭基本的Form、Input、Button組件外，實現跳轉功能的主要是history.push(‘/View’);（其中，history = this.props.history;）push函數中的路徑是路由表中配置的路徑（ ），二者要對應起來。

class LoginFrom extends React.Component{
 constructor(){
 super()
 }

 handleSubmit = (e) => {
 //提交之前判斷輸入的字段是否有錯誤
 e.preventDefault();
 
 **let history = this.props.history;**
 this.props.form.validateFields((errors,values)=>{
  if (!errors) {
  console.log('Received values of form: ', values);
  **history.push('/View');**
  }
 })
 }

 render(){
 //Form.create 包裝的組件會自帶this.props.form屬性，該屬性提供瞭一系列API，包括以下4個
 //getFieldDecorator用於和表單進行雙向綁定
 //isFieldTouched判斷一個輸入控件是否經歷過 getFieldDecorator 的值收集時機 options.trigger(收集子節點的值的時機，默認時onChange)
 //getFieldError獲取某個輸入控件的 Error
 //獲取一組輸入控件的 Error ，如不傳入參數，則獲取全部組件的 Error
 const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
 const userNameError = isFieldTouched('userName') && getFieldError('userName');
 const passWordError = isFieldTouched('password') && getFieldError('password');
 return (
  <div className="login">
  <div className="login-form">
   <div className="login-logo">
   <div className="login-name">MSPA</div>
   </div>
   <Form onSubmit={this.handleSubmit}>
   {/* 一個FromItem中放一個被 getFieldDecorator 裝飾過的 child */}
   <Form.Item
    validateStatus={userNameError ? 'error' : ''}//validateStatus為校驗狀態，如不設置，則會根據校驗規則自動生成，可選：'success' 'warning' 'error' 'validating'
   >
   {
    getFieldDecorator('userName',{
    rules:[{required:true,message:"Please input your username!"}]
    })(
    <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }}/>}
     placeholder="Username"
    />
    )
   }
   </Form.Item>
   <Form.Item
    validateStatus={passWordError ? "error" : ''}
   >
   {
    getFieldDecorator('passWord',{
    rules:[{required:true,message:"Please input your Password!"}]
    })(
    <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }}/>}
     placeholder="Password"
    />
    )
   }
   </Form.Item>
   <Form.Item>
    <Button
    type="primary"
    htmlType="submit"
    disabled={hasErrors(getFieldsError)}
    >登錄
    </Button>
   </Form.Item>
   </Form>
  </div>
  </div>
 )
 }
}
let LoginForm = Form.create()(LoginFrom);
export default LoginForm;

3、在第二步中我們已經把靜態頁面寫出來瞭，接下來就是配置路由表**瞭。**我們將路由信息都配置在瞭router文件夾下的index.js中。react-router中文文檔(https://react-guide.github.io/react-router-cn/)，其中history的簡單介紹可以參考(https://www.jb51.net/article/208929.htm)，比較容易快速理解。

代碼如下：前三行中引入的模塊是基本的模塊，後邊import的模塊是寫好的組件：首頁顯示login界面，登錄成功後跳轉到myView界面，myPicture和myDocument是在myView界面點擊後所顯示的組件。（嵌套路由）

import React from 'react'
import {HashRouter as Router , Route , Switch} from 'react-router-dom'
import { createBrowserHistory } from "history";

import MyView from '../components/myView.js'
import LoginModule from '../login.js'
import MyPicture from '../components/myPicture'
import MyDocument from '../components/myDocument.js'

export default class MyRoute extends React.Component{
 render(){
 return(
  <Router history={createBrowserHistory()}>
  <Switch>
   <Route exact path="/" component={LoginModule}/>
   <MyView path='/View' component={MyDocument}>
   <Route path="/View/abc" component={MyDocument} />
   <Route path="/View/myPicture" component={MyPicture} /> 
   </MyView> 
  </Switch>
  </Router>
 )
 } 
}

4、接下來我們在src文件夾下的index.js（程序的入口文件）文件中寫如下代碼。

import MyRoute from './router/index.js'
import {render} from 'react-dom'
import React from 'react'
render(
 <MyRoute />, 
 document.getElementById('myContent')
);

5、程序測試結果如下：

1）登錄界面（login.js）：

2）輸入用戶名和密碼點擊登錄後的跳轉界面（myView.js）：

在這裡插入圖片描述

到此這篇關於React利用路由實現登錄界面的跳轉的文章就介紹到這瞭,更多相關React 路由實現登錄跳轉內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：

    None Found