diff --git a/src/layouts/UserLayout.tsx b/src/layouts/UserLayout.tsx
index df0890aa..12b66b49 100644
--- a/src/layouts/UserLayout.tsx
+++ b/src/layouts/UserLayout.tsx
@@ -1,10 +1,11 @@
 import SelectLang from '@/components/SelectLang';
 import GlobalFooter from '@/components/GlobalFooter';
-import { ConnectProps } from '@/models/connect';
+import { ConnectProps, ConnectState } from '@/models/connect';
+import { connect } from 'dva';
 import { Icon } from 'antd';
-import React, { Component, Fragment } from 'react';
+import React from 'react';
 import DocumentTitle from 'react-document-title';
-import { formatMessage } from 'umi-plugin-locale';
+import { formatMessage } from 'umi-plugin-react/locale';
 import Link from 'umi/link';
 import logo from '../assets/logo.svg';
 import styles from './UserLayout.less';
@@ -29,55 +30,61 @@ const links = [
 ];
 
 const copyright = (
-  <Fragment>
+  <>
     Copyright <Icon type="copyright" /> 2019 蚂蚁金服体验技术部出品
-  </Fragment>
+  </>
 );
 
 export interface UserLayoutProps extends ConnectProps {
   breadcrumbNameMap: { [path: string]: MenuDataItem };
-  navTheme: string;
 }
 
-class UserLayout extends Component<UserLayoutProps> {
-  render() {
-    const {
-      route = {
-        routes: [],
-      },
-    } = this.props;
-    const { routes = [] } = route;
-    const { children, location } = this.props;
-    const { breadcrumb } = getMenuData(routes, this.props);
-    return (
-      <DocumentTitle
-        title={getPageTitle({
-          pathname: location!.pathname,
-          breadcrumb,
-          formatMessage,
-        })}
-      >
-        <div className={styles.container}>
-          <div className={styles.lang}>
-            <SelectLang />
-          </div>
-          <div className={styles.content}>
-            <div className={styles.top}>
-              <div className={styles.header}>
-                <Link to="/">
-                  <img alt="logo" className={styles.logo} src={logo} />
-                  <span className={styles.title}>Ant Design</span>
-                </Link>
-              </div>
-              <div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
+const UserLayout: React.SFC<UserLayoutProps> = props => {
+  const {
+    route = {
+      routes: [],
+    },
+  } = props;
+  const { routes = [] } = route;
+  const {
+    children,
+    location = {
+      pathname: '',
+    },
+  } = props;
+  const { breadcrumb } = getMenuData(routes, props);
+
+  return (
+    <DocumentTitle
+      title={getPageTitle({
+        pathname: location.pathname,
+        breadcrumb,
+        formatMessage,
+        ...props,
+      })}
+    >
+      <div className={styles.container}>
+        <div className={styles.lang}>
+          <SelectLang />
+        </div>
+        <div className={styles.content}>
+          <div className={styles.top}>
+            <div className={styles.header}>
+              <Link to="/">
+                <img alt="logo" className={styles.logo} src={logo} />
+                <span className={styles.title}>Ant Design</span>
+              </Link>
             </div>
-            {children}
+            <div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
           </div>
-          <GlobalFooter links={links} copyright={copyright} />
+          {children}
         </div>
-      </DocumentTitle>
-    );
-  }
-}
+        <GlobalFooter links={links} copyright={copyright} />
+      </div>
+    </DocumentTitle>
+  );
+};
 
-export default UserLayout;
+export default connect(({ settings }: ConnectState) => ({
+  ...settings,
+}))(UserLayout);