React+AntdDesign写一个完整的demo ——起步

项目准备：
1、编辑器这里我采用的是Webstrom
2、创建react-app项目和引入antd-design框架；参考链接：
https://ant.design/docs/react/use-with-create-react-app-cn
准备工作完成后开始创建目录（个人推荐）：

1、创建目录

2、创建布局主框架并创建router.js

安装react-router-dom

yarn add react-router-dom

安装前：
React+AntdDesign写一个完整的demo ——起步
安装成功：

安装后：

然后在Routes文件夹下创建Router.js文件

3、新建两个组件

在Component文件夹下新建一个Home和Login文件夹，然后在对应的文件夹下面新建Home.js和Login.js
React+AntdDesign写一个完整的demo ——起步

接下来给这两个页面分配路由，编写router.js

import React,{Component} from 'react';
import {HashRouter,Route,Switch} from 'react-router-dom';
import Home from "../Component/Home/Home";
import Login from "../Component/Login/Login";

class Router extends Component{
    render() {
        return (
            <div>
                <HashRouter>
                    <Switch>
                        <Route exact path="/" component={Home}/>
                        <Route path="/login" component={Login}/>
                    </Switch>
                </HashRouter>
            </div>
        );
    }
}
export default Router;

然后修改index.js里的内容
React+AntdDesign写一个完整的demo ——起步
接着运行yarn start就会看见
http://localhost:3000/#/

http://loaclhost:3000/#/login