您的位置：首页 > 编程技术 > js  >  React利用路由实现登录界面的跳转

React利用路由实现登录界面的跳转

 更新时间：2021年4月6日 15:01  点击：2355

上一篇在配置好了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 路由实现登录跳转内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

[!--infotagslink--]

相关文章

  • php中登录后跳转回原来要访问的页面实例

    在很多网站用户先访问一个要登录的页面，但当时没有登录后来登录了，等待用户登录成功之后肯定希望返回到上次访问的页面，下面我就来给大家介绍登录后跳转回原来要访问的页...2016-11-25

  • vue 实现动态路由的方法

    这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-06

  • php中用curl模拟登录discuz以及模拟发帖

    本文章完美的利用了php的curl功能实现模拟登录discuz以及模拟发帖，本教程供参考学习哦。 代码如下 复制代码 <?php $discuz_url = &lsquo;ht...2016-11-25

  • 关于React Native报Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞错误(解决方案)

    这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞错误，本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12

  • Ruby on Rails实现最基本的用户注册和登录功能的教程

    这里我们主要以has_secure_password的用户密码验证功能为中心,来讲解Ruby on Rails实现最基本的用户注册和登录功能的教程,需要的朋友可以参考下...2020-06-30

  • PHP中SSO Cookie登录分析和实现

    什么是SSO？单点登录SSO（Single Sign-On）是身份管理中的一部分。SSO的一种较为通俗的定义是：SSO是指访问同一服务器不同应用中的受保护资源的同一用户，只需要登录一次，即通过一个应用中的安全验证后，再访问其他应用中的受保护...2015-11-08

  • 解决vue动态路由异步加载import组件,加载不到module的问题

    这篇文章主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27

  • PHP中SSO Cookie登录分析和实现

    什么是SSO？单点登录SSO（Single Sign-On）是身份管理中的一部分。SSO的一种较为通俗的定义是：SSO是指访问同一服务器不同应用中的受保护资源的同一用户，只需要登录一次，即通过一个应用中的安全验证后，再访问其他应用中的受保护...2015-11-08

  • php有效防止同一用户多次登录

    【问题描述】：同一用户在同一时间多次登录如果不能检测出来，是危险的。因为，你无法知道是否有其他用户在登录你的账户。如何禁止同一用户多次登录呢？ 【解决方案】 (1) 每次登录，身份认证成功后，重新产生一个session_id。 s...2015-11-24

  • vue实现用户登录切换

    这篇文章主要为大家详细介绍了vue实现用户登录切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-04-22

  • React引入antd-mobile+postcss搭建移动端

    本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程，文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了，防止大家踩坑，特此把解决方案分享到脚本之家平台，需要的朋友参考下吧...2021-06-21

  • React使用高德地图的实现示例(react-amap)

    这篇文章主要介绍了React使用高德地图的实现示例(react-amap)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-18

  • 使用 React 和 Threejs 创建一个VR全景项目的过程详解

    这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-04-06

  • java后台实现js关闭本页面,父页面指定跳转或刷新操作

    这篇文章主要介绍了java后台实现js关闭本页面,父页面指定跳转或刷新操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-16

  • 微信小程序 页面跳转传递值几种方法详解

    这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16

  • 修改mysql密码phpmyadmin不能登录

    出现phpmyadmin不能登录是我在修改我mysql服务器密码之后导致的，后来百度了相关的原因，原来是修改了mysql密码之后我们还需要在phpmyadmin目录中去修改config.inc.php中...2016-11-25

  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29

  • 解决vue-router路由拦截造成死循环问题

    这篇文章主要介绍了解决vue-router路由拦截造成死循环问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05

  • vue.js Router中嵌套路由的实用示例

    这篇文章主要给大家介绍了关于vue.js Router中嵌套路由的相关资料,所谓嵌套路由就是路由里面嵌套他的子路由,文章通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-06-27

  • Nginx根据不同浏览器语言配置页面跳转的方法

    这篇文章主要介绍了Nginx根据不同浏览器语言配置页面跳转的方法,包括一个简体繁体的基本判断方法及实际根据中英文跳转的例子,需要的朋友可以参考下...2016-05-22