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 (
    <div>
      <h2>這是登錄窗口</h2>
    <Button type="primary">注冊</Button>
    <Button>登錄</Button>
      <br/>
    <Button type="dashed">Dashed</Button>
    <Button type="danger">Danger</Button>
    </div>
);
};
export default Login;

　　

第二步：在routes目錄中創建Login.js

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

　　

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

首先引入：

import LoginRoute from './routes/Login'

添加路由信息的設置：

<Route path="/login" component={LoginRoute} />

最終代碼如下：

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 (
    <Router history={history}>
      <Route path="/" component={IndexPage} />
      <Route path="/products" component={Products} />
      <Route path="/login" component={LoginRoute} />
    </Router>
  );
}
export default RouterConfig;

　　

 

此時就已經實現功能了，其他更復雜的在此基礎上修改就可以了。