react+typescript+antd 项目实战(3)

React Router

安装

yarn add react-router @types/react-router --dev
yarn add react-router-dom @types/react-router-dom --dev
实现简单的路由跳转，登录成功以后从登录页跳转到Home页

1、添加登录页面

import { Button, Checkbox, Form, Icon, Input, message } from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import * as React from 'react';
import { RouteComponentProps } from 'react-router-dom';
import 'src/assets/less/login.less';

interface ILoginParam {
    username: string;
    password: string;
    remember: boolean;
}

interface ILoginFormProps extends FormComponentProps, RouteComponentProps {
}

class LoginForm extends React.Component {
    readonly state: Readonly = {
        username: '',
        password: '',
        remember: true,
    }

    constructor(props: ILoginFormProps) {
        super(props);
    }

    handleSubmit = (e: React.SyntheticEvent) => {
        e.preventDefault();
        this.props.form.validateFields(async (err, values) => {
            if (!err) {
                try {
                    this.props.history.push('/home');
                } catch (error) {
                    message.error(JSON.stringify(error));
                }
            }
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            

                

                    

                        

                            
登录
                        
                        

                            
                                {getFieldDecorator(`username`, {
                                    initialValue: this.state.username,
                                    rules: [{ required: true, message: '用户名不能为空' }]
                                })(
                                    } placeholder='username' />
                                )}
                            
                            
                                {getFieldDecorator(`password`, {
                                    initialValue: this.state.password,
                                    rules: [{ required: true, message: '密码不能为空' }]
                                })(
                                    } type="password" placeholder='password' />
                                )}
                            
                            
                                {getFieldDecorator(`remember`, {
                                    valuePropName: 'checked',
                                    initialValue: this.state.remember,
                                })(
                                    记住密码
                                )}
                                
                                    登录
                                
                            
                        
                    
                
            
        );
    }
}

const LoginPage = Form.create()(LoginForm);
export default LoginPage;

这里需要注意的是所有页面的props都从RouteComponentProps继承，其中包括了history，location，match等对象

2、配置路由

在src目录下新建routers文件夹，新建index.tsx

import * as React from 'react';
import { HashRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
import HomePage from 'src/components/views/HomePage';
import LoginPage from 'src/components/views/LoginPage';

const basename = '/';

const RoutersConfig = () => {
    return (
        
            
                
                
                
            
        
    );
}

export default RoutersConfig;

注：可以将路由地址抽象成对象，方便管理。也可以用react-router-redux管理，具体以后再介绍

3、使用路由

修改App.tsx文件

import * as React from 'react';
import RoutersConfig from './routers';

class App extends React.Component {
  public render() {
    return (
      
    );
  }
}

export default App;

运行yarn start 查看效果

项目地址：https://github.com/kaichen87/react-typescript-antd-demo