ant-design 实现一个登陆窗口

 

前提：已经完成项目实战（https://ant.design/docs/react/practical-projects-cn#定义-Model）

如果要想实现一个登陆窗口，首先得有一个ui，想到的是应该创建一个组件；有了组件之后，可以考虑直接在实战的组件中去显示，或者单独定义一个路由，去访问该路由去显示（这里采用路由的方案），最终效果如下：

 

第一步：在src/components文件间中，实现：

/**
 * Created by kunyashaw on 2017/2/28.
 */
import { Button } from 'antd';
import React from 'react';
const Login = () => {
  return (
    

      
这是登录窗口
    注册
    登录
      

    Dashed
    Danger
    
);
};
export default Login;

　　

第二步：在routes目录中创建Login.js

import React from 'react';
import Login from '../components/Login'
const LoginRoute = (props) => (
  
);
export default LoginRoute;

　　

第三步：在router.js中添加路由信息的配置

首先引入：

import LoginRoute from './routes/Login'

添加路由信息的设置：

最终代码如下：

import React from 'react';
import { Router, Route } from 'dva/router';
import IndexPage from './routes/IndexPage';
import Products from './routes/Products';
import LoginRoute from './routes/Login'
function RouterConfig({ history }) {
  return (
    
      
      
      
    
  );
}
export default RouterConfig;

　　

 

此时就已经实现功能了，其他更复杂的在此基础上修改就可以了。