cloud-fuction page to / && *

src/components/app/App.jsx

@@ -1,14 +1,17 @@
 import React, {Component} from 'react';
 import {Layout, Menu, Input, Button, Spin,Breadcrumb, Icon,Radio,LocaleProvider  } from 'antd';
-import {BrowserRouter as Router, Route, Link} from "react-router-dom";
+import {BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
 import gql from "graphql-tag";
 import {Query} from "react-apollo";
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 
-import Deploy from '../common/deploy/Deploy';
-import Schema from '../common/schema/Schema';
-import Graphql from "../common/graphql/Graphql";
+import CloudFuction from '../cloudFunction/CloudFunction';
+import MonitorNotify from '../monitorNotify/MonitorNotify';
+import DataAnalysis from '../dataAnalysis/DataAnalysis';
+import DataStorage from '../dataStorage/DataStorage';
+
+
 import GenerateJs from "../common/generateJs/GenerateJs";
 import zhCN from 'antd/lib/locale-provider/zh_CN';
 import logo from '../../images/logo.png';
@@ -16,7 +19,7 @@ import '../common/graphql/index.css';
 import './index.css'
 
 const { SubMenu } = Menu;
-const { Header, Content, Sider } = Layout;
+const { Header, Sider } = Layout;
 moment.locale('en');
 
 class App extends Component {
@@ -126,7 +129,7 @@ class App extends Component {
                             style={{lineHeight: '64px'}}
                             onClick={(e) => this.switchMenu('menuLevel1', e)}
                         >
-                            <Menu.Item key="cloud-function"><Link to="/cloud-function/">Cloud Function</Link></Menu.Item>
+                            <Menu.Item key="cloud-function"><Link to="/">Cloud Function</Link></Menu.Item>
                             <Menu.Item key="data-storage"><Link to="/data-storage/">Data Storage</Link></Menu.Item>
                             <Menu.Item key="data-analysis"><Link to="/data-analysis/">Data Analysis</Link></Menu.Item>
                             <Menu.Item key="monitor-notification"><Link to="/monitor-notification/">Monitor Notification</Link></Menu.Item>
@@ -260,11 +263,13 @@ class App extends Component {
                         </Sider>
 
                         <Layout style={{marginTop: '64px', zIndex: '0'}}>
-                            <Route path="/" exact component={CloudFunction}/>
-                            <Route path="/cloud-function/" component={CloudFunction}/>
-                            <Route path="/data-storage/" component={DataStorge}/>
-                            <Route path="/data-analysis/" component={DataAnalysis}/>
-                            <Route path="/monitor-notification/" component={MonitorNntification}/>
+                            <Switch>
+                                <Route path="/" exact component={CloudFuction}/>
+                                <Route path="/data-storage/" component={DataStorage}/>
+                                <Route path="/data-analysis/" component={DataAnalysis}/>
+                                <Route path="/monitor-notification/" component={MonitorNotify}/>
+                                <Redirect path="*" to="/" />
+                            </Switch>
                         </Layout>
 
                     </Layout>
@@ -276,82 +281,6 @@ class App extends Component {
 
 export default App;
 
-class CloudFunction extends Component {
-    constructor() {
-        super();
-        this.state = {
-            menuLevel2: "schema",
-        }
-    }
-
-    switchMenu = (menuName, e) => {
-        console.log('menuName', menuName, 'e', e);
-        this.setState({
-            [menuName]: e.key,
-        });
-    };
-
-    render() {
-        return (
-            <div>
-                <Menu
-                    mode="horizontal"
-                    defaultSelectedKeys={['schema']}
-                    style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '1'}}
-                    onClick={(e) => this.switchMenu('menuLevel2', e)}
-                    selectedKeys={[this.state.menuLevel2]}
-                >
-                    <Menu.Item key="schema">schema</Menu.Item>
-                    <Menu.Item key="deploy">deploy</Menu.Item>
-                    <Menu.Item key="graphql">graphql</Menu.Item>
-                    <Menu.Item key="graphiql">graphiql</Menu.Item>
-                    <Menu.Item key="metabase">metabase</Menu.Item>
-                    <Menu.Item key="notification">notification</Menu.Item>
-                </Menu>
-
-                <Layout style={{ padding: '24px', zIndex: '0'}}>
-                    <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
-                        {(() => {
-                            switch (this.state.menuLevel2) {
-                                case 'schema':
-                                    return <Schema userID={this.state.userID}/>;
-                                case 'deploy':
-                                    return <Deploy />;
-                                case 'graphql':
-                                    return <GenerateJs />;
-                                case 'graphiql':
-                                    return <Graphql />;
-                                default:
-                                    return <Graphql />
-                            }
-                        })()}
-                    </Content>
-                </Layout>
-            </div>
-        )
-    }
-}
 
-function DataStorge() {
-    return (
-        <div>
-            DataStorge
-        </div>
-    )
-}
 
-function DataAnalysis() {
-    return (
-        <div>
-            DataAnalysis
-        </div>
-    )
-}
 
-function MonitorNntification() {
-    return (
-        <div>
-            MonitorNntification
-        </div>
-    )
-}

src/components/cloudFunction/CloudFunction.jsx

@@ -0,0 +1,68 @@
+import React, {Component} from 'react';
+import GenerateJs from "../common/generateJs/GenerateJs";
+import {Layout, Menu, LocaleProvider  } from 'antd';
+
+import Deploy from '../common/deploy/Deploy';
+import Schema from '../common/schema/Schema';
+import Graphql from "../common/graphql/Graphql";
+
+const { SubMenu } = Menu;
+const { Content } = Layout;
+
+class CloudFunction extends Component {
+    constructor() {
+        super();
+        this.state = {
+            menuLevel2: "schema",
+        }
+    }
+
+    switchMenu = (menuName, e) => {
+        console.log('menuName', menuName, 'e', e);
+        this.setState({
+            [menuName]: e.key,
+        });
+    };
+
+    render() {
+        return (
+            <div>
+                <Menu
+                    mode="horizontal"
+                    defaultSelectedKeys={['schema']}
+                    style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '1'}}
+                    onClick={(e) => this.switchMenu('menuLevel2', e)}
+                    selectedKeys={[this.state.menuLevel2]}
+                >
+                    <Menu.Item key="schema">schema</Menu.Item>
+                    <Menu.Item key="deploy">deploy</Menu.Item>
+                    <Menu.Item key="graphql">graphql</Menu.Item>
+                    <Menu.Item key="graphiql">graphiql</Menu.Item>
+                    <Menu.Item key="metabase">metabase</Menu.Item>
+                    <Menu.Item key="notification">notification</Menu.Item>
+                </Menu>
+
+                <Layout style={{ padding: '24px', zIndex: '0'}}>
+                    <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
+                        {(() => {
+                            switch (this.state.menuLevel2) {
+                                case 'schema':
+                                    return <Schema userID={this.state.userID}/>;
+                                case 'deploy':
+                                    return <Deploy />;
+                                case 'graphql':
+                                    return <GenerateJs />;
+                                case 'graphiql':
+                                    return <Graphql />;
+                                default:
+                                    return <Graphql />
+                            }
+                        })()}
+                    </Content>
+                </Layout>
+            </div>
+        )
+    }
+}
+
+export default CloudFunction;

src/components/dataAnalysis/DataAnalysis.jsx

@@ -0,0 +1,9 @@
+import React, {Component} from 'react';
+
+export default function DataAnalysis() {
+    return (
+        <div>
+            DataAnalysis
+        </div>
+    )
+}

src/components/dataStorage/DataStorage.jsx

@@ -0,0 +1,9 @@
+import React, {Component} from 'react';
+
+export default function DataStorge() {
+    return (
+        <div>
+            DataStorge
+        </div>
+    )
+}

src/components/monitorNotify/MonitorNotify.jsx

@@ -0,0 +1,9 @@
+import React, {Component} from 'react';
+
+export default function MonitorNotification() {
+    return (
+        <div>
+            MonitorNotification
+        </div>
+    )
+}