登录页面制作总结

遇到的困难

内元素 设置 margin-top 影响外元素

解决的方法 

1
2
3
4


#root {
  overflow:hidden
}

设置 overflow 就不会被子元素影响了

ant-design icon兼容性为

1

// import { Icon } from '@ant-design/compatible';

不错的学习视频

不错的学习入门教程

路由踩坑

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// 配置 页面路由

import React from "react";
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom'
import LoginPage from "../Pages/loginPage/index";
import ManagerPage from "../Pages/managerPage/index";
import IndexPage from "../Pages/managerPage/index/indexPage";



function MainPage() {
  return (
    <Router>
      <Switch>
        <Route path="/"    exact >
          <LoginPage/>
        </Route>
        <Route path="/login/" exact  >
          <LoginPage />
        </Route>
        <Route path="/index/"     >
          <ManagerPage >
             
             <Switch>
              <Route path="/index/" exact component={()=><div>ddd</div>}>
                  
              </Route>
              <Route path="/index/test/" exact component={()=><div>ddd444</div>}>
                    
              </Route>
             </Switch>
             
          </ManagerPage>
        </Route>
        <Route path="*" render={()=><div>找不到页面</div>} />
      </Switch>

    </Router>
  )
}

export default MainPage