React uses routing to redirect to the login interface

In the previous article, after configuring the webpack and react environment, we started to write the login interface and the subsequent jump to the homepage function.

1. First, take a look at the overall directory structure.

Because many times when you are looking at examples written by others, unexpected problems may occur due to unfamiliarity with the directory structure.

Overall directory structure

2. General process:

1) webpack configuration entry file src/index.js
2) After running index.html, first load the entry file src/index.js
3) Load the routing table src/router/index.js
4) According to the configuration in the routing table, the login interface src/login.js will be loaded first
5) When you successfully log in to the login interface, jump to src/components/myView.js
6) Clicking the left menu in the myView file will display the specified pages (all configured in the routing table)

3. Write HTML files.

Among them, 1) the id myContent is used to place the components we wrote.
2) The file loaded in the script is the js file packaged by webpack.

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

4. The login interface is written in login.js

1) Introduce necessary modules: antd (Ant Design) is a component library, and all the components used in our project come from it. (https://ant.design/index-cn) (If antd.css is not introduced, the interface will not display the style)

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' //If you don't import this file, the antd style will not be displayed import './style/login.css';

2) Create a login form component. In addition to the basic Form, Input, and Button components, the main function for implementing the jump function is history.push('/View'); (where history = this.props.history;). The path in the push function is the path configured in the routing table ( ), and the two must correspond.

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

 handleSubmit = (e) => {
 //Before submitting, check whether the input field has errors 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(){
 //The component wrapped by Form.create will have its own this.props.form property, which provides a series of APIs, including the following 4 //getFieldDecorator is used for two-way binding with the form //isFieldTouched determines whether an input control has experienced the value collection timing of getFieldDecorator options.trigger (the timing of collecting the value of the child node, the default is onChange)
 //getFieldError gets the Error of an input control
 //Get the Error of a group of input controls. If no parameters are passed, the Error of all components will be obtained.
 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}>
   {/* Put a child decorated by getFieldDecorator in a FromItem */}
   <Form.Item
    validateStatus={userNameError ? 'error' : ''} //validateStatus is the validation status. If not set, it will be automatically generated according to the validation rules. Optional: '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)}
    >Login</Button>
   </Form.Item>
   </Form>
  </div>
  </div>
 )
 }
}
let LoginForm = Form.create()(LoginForm);
export default LoginForm;

3. In the second step, we have written the static page, and the next step is to configure the routing table**. **We configured the routing information in index.js under the router folder. react-router Chinese documentation (https://react-guide.github.io/react-router-cn/), where a brief introduction to history can be referenced (https://www.jb51.net/article/208929.htm), which is relatively easy to understand quickly.

The code is as follows: the modules introduced in the first three lines are basic modules, and the modules imported later are pre-written components: the home page displays the login interface, and jumps to the myView interface after successful login. myPicture and myDocument are the components displayed after clicking on the myView interface. (Nested Routes)

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. Next, we write the following code in the index.js (entry file of the program) file in the src folder.

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

5. The program test results are as follows:

1) Login interface (login.js):

2) Enter the username and password and click the login page (myView.js):

insert image description here

This is the end of this article about using React to use routing to redirect to the login interface. For more information about using React routing to redirect to the login page, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Implementation steps for setting up the React+Ant Design development environment
How to build a React project with Vite
React example of how to get the value of the input box
React implements the sample code of Radio component
Let's talk about my understanding and application of React Context
React hooks introductory tutorial
Detailed process of creating a VR panoramic project using React and Threejs
A brief talk about React Router's history
How to simplify Redux with Redux Toolkit

<<: A simple way to change the password in MySQL 5.7

>>: A brief discussion on why daemon off is used when running nginx in docker

Summary of vue's webpack -v error solution

React uses routing to redirect to the login interface

1. First, take a look at the overall directory structure.

2. General process:

3. Write HTML files.

4. The login interface is written in login.js

5. The program test results are as follows:

Summary of vue's webpack -v error solution

Detailed explanation of the use of Vue image drag and drop zoom component

A brief discussion on the synchronization solution between MySQL and redis cache

Analysis of the implementation of MySQL statement locking

Vue implements the frame rate playback of the carousel

Ubuntu 15.04 opens mysql remote port 3306

The hottest trends in web design UI in 2013 The most popular UI designs

Mysql 5.6.37 winx64 installation dual version mysql notes

How to use jsonp in vue

A complete example of Vue's multi-level jump (page drill-down) function for related pages

Recommend

Discussion on style customization and browser compatibility issues when using input element [type="file"]

Vue implements real-time refresh of the time display in the upper right corner

A brief discussion on JavaScript shallow copy and deep copy

A brief analysis of the differences and functions between transition, transform, and translate in CSS3

Tomcat class loader implementation method and example code

Detailed code for building a multi-person video chat service based on webrtc on Ubuntu

MySQL query tree structure method

WeChat applet realizes taking photos and selecting pictures from albums

Detailed tutorial on installing mysql under Linux

About the difference between inspecting elements and viewing the source code of a web page

gbk utf8 How to choose to correctly understand and use GBK and UTF-8 web page encoding

The difference between html block-level tags and inline tags

AsyncHooks asynchronous life cycle in Node8

What to do if you forget the initial password of MySQL on MAC

Example of using mycat to implement MySQL database read-write separation