快捷導(dǎo)航

React利用路由實現(xiàn)登錄界面的跳轉(zhuǎn)

更新時間：2021年04月06日 11:02:39 作者：前端子金

這篇文章主要介紹了React利用路由實現(xiàn)登錄界面的跳轉(zhuǎn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

上一篇在配置好了webpack和react的環(huán)境后，接下來開始寫登錄界面，以及接下來的跳轉(zhuǎn)到主頁的功能。

1、首先看一下總體的目錄結(jié)構(gòu)。

因為很多時候在看別人寫的例子的時候因為目錄結(jié)構(gòu)不熟悉后邊會出現(xiàn)意想不到的岔子。

總體的目錄結(jié)構(gòu)

2、大體流程：

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

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）創(chuàng)建登錄表單組件。除了基本的Form、Input、Button組件外，實現(xiàn)跳轉(zhuǎn)功能的主要是history.push('/View');（其中，history = this.props.history;）push函數(shù)中的路徑是路由表中配置的路徑（），二者要對應(yīng)起來。

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判斷一個輸入控件是否經(jīng)歷過 getFieldDecorator 的值收集時機 options.trigger(收集子節(jié)點的值的時機，默認(rèn)時onChange)
 //getFieldError獲取某個輸入控件的 Error
 //獲取一組輸入控件的 Error ，如不傳入?yún)?shù)，則獲取全部組件的 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為校驗狀態(tài)，如不設(shè)置，則會根據(jù)校驗規(guī)則自動生成，可選：'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、在第二步中我們已經(jīng)把靜態(tài)頁面寫出來了，接下來就是配置路由表**了。**我們將路由信息都配置在了router文件夾下的index.js中。react-router中文文檔(https://react-guide.github.io/react-router-cn/)，其中history的簡單介紹可以參考(http://www.dbjr.com.cn/article/208929.htm)，比較容易快速理解。

代碼如下：前三行中引入的模塊是基本的模塊，后邊import的模塊是寫好的組件：首頁顯示login界面，登錄成功后跳轉(zhuǎn)到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')
);