Fix optimize

Author: xxxsf

src/app/App.js

@@ -1,92 +1,32 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import { Route, Switch, Redirect } from "react-router-dom";
-import { Layout, Menu, Dropdown, Icon } from "antd";
 
-import App from "./containers/index";
-import HomePage from "./containers/homePage/index.tsx";
-import SubPage from "./containers/subPage/index";
-import Login from "./containers/login/index";
-
-const { Header, Content, Footer } = Layout;
-
-export default class EnrtyRouter extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  handleMenuClick = e => {
-    if (e.key === "exit") {
-      sessionStorage.removeItem("access_token");
-      window.location.hash = "login";
-    }
-  };
-
-  renderMainPage() {
-    let selectMenu = window.location.hash.split("/")[1]
-      ? window.location.hash.split("/")[1]
-      : "homePage";
-
-    const menu = (
-      <Menu onClick={this.handleMenuClick}>
-        <Menu.Item key="exit">exit</Menu.Item>
-      </Menu>
-    );
+import Header from "./components/Header";
+import HomePage from "./containers/homePage";
+import SubPage from "./containers/subPage";
+import Login from "./containers/login";
 
+export default class App extends React.Component {
+  render() {
     return (
       <React.Fragment>
         {/* Header */}
-        <Header className="header">
-          <Menu
-            theme="dark"
-            mode="horizontal"
-            defaultSelectedKeys={["homePage"]}
-            style={{ lineHeight: "64px" }}
-            selectedKeys={[selectMenu]}
-          >
-            <Menu.Item key="homePage">
-              <Link to="/">HomePage</Link>
-            </Menu.Item>
-            <Menu.Item key="subPage">
-              <Link to="/subPage">SubPage</Link>
-            </Menu.Item>
-
-            <Menu.Item key="user" style={{ float: "right" }}>
-              <Dropdown overlay={menu} onClick={this.handleMenuClick}>
-                <a className="ant-dropdown-link">
-                  Guest<Icon type="down" />
-                </a>
-              </Dropdown>
-            </Menu.Item>
-          </Menu>
-        </Header>
+        <Header />
 
         {/* main content */}
         <Switch>
           <Route
             exact
             path="/"
             component={() => {
-              if (!sessionStorage.getItem("access_token")) {
+              if (!sessionStorage.getItem("access_token"))
                 return <Redirect to="/login" />;
-              } else {
-                return <HomePage />;
-              }
+              else return <HomePage />;
             }}
           />
           <Route path="/subPage" component={SubPage} />
           <Route path="/login" component={Login} />
         </Switch>
-        
-      </React.Fragment>
-    );
-  }
-
-  render() {
-    const isAuthenticated = sessionStorage.getItem("access_token");
-    return (
-      <React.Fragment>
-        {isAuthenticated ? this.renderMainPage() : <Login />}
       </React.Fragment>
     );
   }

src/app/components/Header.js

@@ -0,0 +1,53 @@
+import React from "react";
+import { Layout, Menu, Dropdown, Icon } from "antd";
+import { Link } from "react-router-dom";
+
+const { Header } = Layout;
+
+const HeaderComponent = () => {
+  let selectMenu = window.location.hash.split("/")[1]
+    ? window.location.hash.split("/")[1]
+    : "homePage";
+
+  const menu = (
+    <Menu onClick={handleMenuClick}>
+      <Menu.Item key="exit">exit</Menu.Item>
+    </Menu>
+  );
+
+  const handleMenuClick = e => {
+    if (e.key === "exit") {
+      sessionStorage.removeItem("access_token");
+      window.location.hash = "login";
+    }
+  };
+
+  return (
+    <Header className="header">
+      <Menu
+        theme="dark"
+        mode="horizontal"
+        defaultSelectedKeys={["homePage"]}
+        style={{ lineHeight: "64px" }}
+        selectedKeys={[selectMenu]}
+      >
+        <Menu.Item key="homePage">
+          <Link to="/">HomePage</Link>
+        </Menu.Item>
+        <Menu.Item key="subPage">
+          <Link to="/subPage">SubPage</Link>
+        </Menu.Item>
+
+        <Menu.Item key="user" style={{ float: "right" }}>
+          <Dropdown overlay={menu} onClick={handleMenuClick}>
+            <a className="ant-dropdown-link">
+              Guest<Icon type="down" />
+            </a>
+          </Dropdown>
+        </Menu.Item>
+      </Menu>
+    </Header>
+  );
+};
+
+export default HeaderComponent;

src/app/containers/index.jsx

@@ -11,7 +11,7 @@ const error = () => {
 };
 
 export class Login extends React.Component {
-  componentWillMount() {
+  componentDidMount() {
     sessionStorage.clear();
   }
 
@@ -26,7 +26,7 @@ export class Login extends React.Component {
         if (!err) {
           console.log("Received values of form: ", values);
           sessionStorage.setItem("access_token", "guest");
-          window.location.hash = "#";
+          window.location.hash = "/"
         }
       } else {
         error();