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<ILoginFormProps, ILoginParam> {
    readonly state: Readonly<ILoginParam> = {
        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 (
            <div className="login-box">
                <div className="login">
                    <div className="login-form-box">
                        <div className="login-logo">
                            <div className="login-name">登录</div>
                        </div>
                        <Form onSubmit={this.handleSubmit} className="login-form">
                            <Form.Item>
                                {getFieldDecorator(`username`, {
                                    initialValue: this.state.username,
                                    rules: [{ required: true, message: '用户名不能为空' }]
                                })(
                                    <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder='username' />
                                )}
                            </Form.Item>
                            <Form.Item>
                                {getFieldDecorator(`password`, {
                                    initialValue: this.state.password,
                                    rules: [{ required: true, message: '密码不能为空' }]
                                })(
                                    <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder='password' />
                                )}
                            </Form.Item>
                            <Form.Item>
                                {getFieldDecorator(`remember`, {
                                    valuePropName: 'checked',
                                    initialValue: this.state.remember,
                                })(
                                    <Checkbox>记住密码</Checkbox>
                                )}
                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        );
    }
}

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 (
        <Router basename={basename}>
            <Switch>
                <Route path='/login' exact={true} component={LoginPage} />
                <Route path='/home' component={HomePage} />
                <Redirect to='/login' />
            </Switch>
        </Router>
    );
}

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 (
      <RoutersConfig />
    );
  }
}

export default App;

运行yarn start 查看效果

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