step 6 添加 Header Menu

src/layouts/Header.js

@@ -0,0 +1,28 @@
+import { Menu, Icon } from 'antd';
+import Link from 'umi/link';
+function Header({ location }) {
+  return (
+    <Menu
+      selectedKeys={[location.pathname]}
+      mode="horizontal"
+      theme="dark"
+    >
+      <Menu.Item key="/">
+        <Link to="/"><Icon type="home" />Home</Link>
+      </Menu.Item>
+      <Menu.Item key="/users">
+        <Link to="/users"><Icon type="bars" />Users</Link>
+      </Menu.Item>
+      <Menu.Item key="/umi">
+        <a href="https://github.com/umijs/umi" target="_blank" rel="noopener noreferrer">umi</a>
+      </Menu.Item>
+      <Menu.Item key="/dva">
+        <a href="https://github.com/dvajs/dva" target="_blank" rel="noopener noreferrer">dva</a>
+      </Menu.Item>
+      <Menu.Item key="/404">
+        <Link to="/page-you-dont-know"><Icon type="frown" />404</Link>
+      </Menu.Item>
+    </Menu>
+  );
+}
+export default Header;

src/layouts/index.js

@@ -1,9 +1,10 @@
+import Header from './Header';
 import styles from './index.css';
 
 function BasicLayout(props) {
   return (
     <div className={styles.normal}>
-      <h1 className={styles.title}>Yay! Welcome to umi!</h1>
+      <Header location={props.location}/>
       { props.children }
     </div>
   );