怎么在React中利用路由實(shí)現(xiàn)一個(gè)登錄界面的跳轉(zhuǎn)

發(fā)布時(shí)間：2021-04-06 15:42:29 來源：億速云閱讀：642 作者：Leah 欄目：開發(fā)技術(shù)

怎么在React中利用路由實(shí)現(xiàn)一個(gè)登錄界面的跳轉(zhuǎn)？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

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

因?yàn)楹芏鄷r(shí)候在看別人寫的例子的時(shí)候因?yàn)槟夸浗Y(jié)構(gòu)不熟悉后邊會(huì)出現(xiàn)意想不到的岔子。

2、大體流程：

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

3、寫HTML文件。

其中，1）id為myContent處是為了放置我們寫的組件。
2）script中加載的文件時(shí)webpack打包后的js文件。

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

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

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

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'//不引入這個(gè)文件那么不顯示antd的樣式
import './style/login.css';

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

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

 handleSubmit = (e) => {
 //提交之前判斷輸入的字段是否有錯(cuò)誤
 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 包裝的組件會(huì)自帶this.props.form屬性，該屬性提供了一系列API，包括以下4個(gè)
 //getFieldDecorator用于和表單進(jìn)行雙向綁定
 //isFieldTouched判斷一個(gè)輸入控件是否經(jīng)歷過 getFieldDecorator 的值收集時(shí)機(jī) options.trigger(收集子節(jié)點(diǎn)的值的時(shí)機(jī)，默認(rèn)時(shí)onChange)
 //getFieldError獲取某個(gè)輸入控件的 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}>
   {/* 一個(gè)FromItem中放一個(gè)被 getFieldDecorator 裝飾過的 child */}
   <Form.Item
    validateStatus={userNameError ? 'error' : ''}//validateStatus為校驗(yàn)狀態(tài)，如不設(shè)置，則會(huì)根據(jù)校驗(yàn)規(guī)則自動(dòng)生成，可選：'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://kemok4.com/article/208929.htm)，比較容易快速理解。

怎么在React中利用路由實(shí)現(xiàn)一個(gè)登錄界面的跳轉(zhuǎn)

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

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、接下來我們?cè)趕rc文件夾下的index.js（程序的入口文件）文件中寫如下代碼。

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

5、程序測試結(jié)果如下：

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

怎么在React中利用路由實(shí)現(xiàn)一個(gè)登錄界面的跳轉(zhuǎn)

2）輸入用戶名和密碼點(diǎn)擊登錄后的跳轉(zhuǎn)界面（myView.js）：

怎么在React中利用路由實(shí)現(xiàn)一個(gè)登錄界面的跳轉(zhuǎn)

看完上述內(nèi)容，你們掌握怎么在React中利用路由實(shí)現(xiàn)一個(gè)登錄界面的跳轉(zhuǎn)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

怎么在React中利用路由實(shí)現(xiàn)一個(gè)登錄界面的跳轉(zhuǎn)

2、大體流程：

3、寫HTML文件。

4、登錄界面寫在了login.js中

5、程序測試結(jié)果如下：

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

2、大體流程：

3、寫HTML文件。

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

5、程序測試結(jié)果如下：