Step 7. 添加layout

src/components/MainLayout/Header.js

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

src/components/MainLayout/MainLayout.css

@@ -0,0 +1,16 @@
+
+.normal {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+}
+
+.main {
+  padding: 0 8px;
+  flex: 1 0 auto;
+}

src/components/MainLayout/MainLayout.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './MainLayout.css';
+import Header from './Header';
+
+function MainLayout({ children, location }) {
+  return (
+    <div className={styles.normal}>
+      <Header location={location} />
+      <div className={styles.content}>
+        <div className={styles.main}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MainLayout;

src/routes/IndexPage.js

@@ -1,17 +1,20 @@
 import React from 'react';
 import { connect } from 'dva';
 import styles from './IndexPage.css';
+import MainLayout from '../components/MainLayout/MainLayout';
 
 function IndexPage() {
   return (
-    <div className={styles.normal}>
-      <h1 className={styles.title}>Yay! Welcome to dva!</h1>
-      <div className={styles.welcome} />
-      <ul className={styles.list}>
-        <li>To get started, edit <code>src/index.js</code> and save to reload.</li>
-        <li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li>
-      </ul>
-    </div>
+    <MainLayout location={location}>
+      <div className={styles.normal}>
+        <h1 className={styles.title}>Yay! Welcome to dva!</h1>
+        <div className={styles.welcome} />
+        <ul className={styles.list}>
+          <li>To get started, edit <code>src/index.js</code> and save to reload.</li>
+          <li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li>
+        </ul>
+      </div>
+    </MainLayout>
   );
 }
 

src/routes/Users.css

@@ -1,3 +1,5 @@
 
 .normal {
+  width: 900px;
+  margin: 3em auto 0;
 }

src/routes/Users.js

@@ -2,12 +2,15 @@ import React from 'react';
 import { connect } from 'dva';
 import styles from './Users.css';
 import UsersComponent from '../components/Users/Users';
+import MainLayout from '../components/MainLayout/MainLayout';
 
-function Users() {
+function Users({ location }) {
   return (
-    <div className={styles.normal}>
-      <UsersComponent />
-    </div>
+    <MainLayout location={location}>
+      <div className={styles.normal}>
+        <UsersComponent />
+      </div>
+    </MainLayout>
   );
 }