React利⽤路由实现登录界⾯的跳转
上⼀篇在配置好了webpack和react的环境后，接下来开始写登录界⾯，以及接下来的跳转到主页的功能。
1、⾸先看⼀下总体的⽬录结构。
因为很多时候在看别⼈写的例⼦的时候因为⽬录结构不熟悉后边会出现意想不到的岔⼦。
2、⼤体流程：
1）webpack配置⼊⼝⽂件src/index.js
react router62）运⾏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中
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(){
//ate 包装的组件会⾃带this.props.form属性，该属性提供了⼀系列API，包括以下4个
//getFieldDecorator⽤于和表单进⾏双向绑定
//isFieldTouched判断⼀个输⼊控件是否经历过 getFieldDecorator 的值收集时机 igger(收集⼦节点的值的时机，默认时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 = ate()(LoginFrom);
export default LoginForm;
代码如下：前三⾏中引⼊的模块是基本的模块，后边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 />,
);
5、程序测试结果如下：
1）登录界⾯（login.js）：
2）输⼊⽤户名和密码点击登录后的跳转界⾯（myView.js）：
到此这篇关于React利⽤路由实现登录界⾯的跳转的⽂章就介绍到这了，更多相关React 路由实现登录跳转内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！