React利用路由实现登录界面的跳转
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了React利用路由实现登录界面的跳转，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
上一篇在配置好了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 ）是一个组件库，我们项目中使用的组件都来自它。()（不引入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 *