结构调整

config/webpackDevServer.config.js

@@ -12,6 +12,7 @@ const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 const host = process.env.HOST || '0.0.0.0';
 
 module.exports = function(proxy, allowedHost) {
+ 
   return {
     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
     // websites from potentially accessing local content through DNS rebinding:
@@ -82,7 +83,12 @@ module.exports = function(proxy, allowedHost) {
       disableDotRule: true,
     },
     public: allowedHost,
-    proxy,
+    proxy:{
+        "/api": {
+          target: "https://www.jianshu.com/shakespeare/notes/2ce732125376/recommendations",
+          pathRewrite: {"^/api" : ""}
+        }
+    },
     before(app, server) {
       
     // console.log(path.join(__dirname,'../src/service/mock/index.js'))

src/component/layout/App.js

@@ -7,33 +7,38 @@ import { Layout } from 'antd';
 import LayoutHeader from "./LayoutHeader";
 import LayoutSlide from "./LayoutSlide";
 import LayoutFooter from "./LayoutFooter";
-
+import { BrowserRouter as Router,Switch,Route} from "react-router-dom";
 const { Header, Content, Footer, Sider } = Layout;
 
  class App extends Component{
      
      render(){
-       //  console.log(LayoutFooter);
+  
          return <Provider store={store}>
-          
-            <Layout className="h100">
-                    <Header className="header">
-                       
-                        <LayoutHeader title="头部" />
-                    </Header>
-                    <Content style={{ padding: '0 50px',display:"flex"}}>
-                
-                    <Layout style={{ padding: '24px 0', background: '#fff' }}>
-                        <Sider width={200} style={{ background: '#fff' }}>
-                            <LayoutSlide data="fdafdsa" title="侧边" />
-                        </Sider>
-                        <Content style={{ padding: '0 24px', minHeight: 280,display:"flex" }}>
-                               <Routers title="路由"/>
-                        </Content>
-                    </Layout>
-                    </Content>
-                    <Footer style={{ textAlign: 'center' }}><LayoutFooter /></Footer>
-            </Layout>
+                   <Router>
+                        <Layout className="h100">
+                                  <Header className="header">
+                                      <LayoutHeader title="头部" />
+                                  </Header>
+
+                                  <Content style={{ padding: '0 50px',display:"flex"}}>
+                              
+                                      <Layout style={{ padding: '24px 0', background: '#fff' }}>
+                                          <Sider width={200} style={{ background: '#fff' }}>
+                                              <LayoutSlide  title="侧边" />
+                                          </Sider>
+                                          <Content style={{ padding: '0 24px', minHeight: 280,display:"flex" }}>
+                                            
+                                                <Routers/>
+        
+                                          </Content>
+                                      </Layout>
+
+                                  </Content>
+
+                                  <Footer style={{ textAlign: 'center' }}><LayoutFooter /></Footer>
+                          </Layout>
+                    </Router>
          </Provider>
      }
 }

src/component/layout/LayoutSlide.js

 import React,{Component} from 'react'
-import { Layout, Menu, Breadcrumb, Icon } from 'antd';
+import { Menu, Icon } from 'antd';
+import {Link} from "react-router-dom";
 const { SubMenu } = Menu;
-const { Header, Content, Footer, Sider } = Layout;
 
 export default class LayoutSlide extends Component{
     componentWillMount(){
@@ -12,19 +12,18 @@ export default class LayoutSlide extends Component{
                             mode="inline"
                             defaultSelectedKeys={['1']}
                             defaultOpenKeys={['sub1']}
-                            style={{ height: '100%' }}
-                        >
+                            style={{ height: '100%' }}>
                             <SubMenu
                             key="sub1"
                             title={
                                 <span>
                                 <Icon type="user" />
-                                subnav 1
+                                
                                 </span>
                             }
                             >
-                            <Menu.Item key="1">option1</Menu.Item>
-                            <Menu.Item key="2">option2</Menu.Item>
+                            <Menu.Item key="1"><Link to="/index2">index2</Link></Menu.Item>
+                            <Menu.Item key="2"><Link to="/">index</Link></Menu.Item>
                             <Menu.Item key="3">option3</Menu.Item>
                             <Menu.Item key="4">option4</Menu.Item>
                             </SubMenu>

src/router/App.js

 import{lazy} from 'react';
 export default [
-    { path:"/system/index",component:lazy(()=>import(/* webpackChunkName: "Index" */ "../view/index/index.js"))},
-    { path:"system/index2",component:lazy(()=>import(/* webpackChunkName: "Index" */ "../view/index/index.js"))}
+    { path:"/",component:lazy(()=>import(/* webpackChunkName: "Index" */ "../view/index/index.js"))},
+    { path:"/index",component:lazy(()=>import(/* webpackChunkName: "Index2" */ "../view/index/index.js"))},
+    { path:"/index2",component:lazy(()=>import(/* webpackChunkName: "Index2" */ "../view/index/index.js"))}
 ]
\ No newline at end of file

src/router/index.js

 import React,{Component,lazy,Suspense} from 'react'
-import {
-    BrowserRouter as Router,
-    Switch,
-    Route,
-  } from "react-router-dom";
+import {Switch,Route } from "react-router-dom";
 import Load from "../component/loading/index.js";
 //import Demo from "../view/index/index";
 //const Demo = lazy(()=>import(/* webpackChunkName: "Index" */ "../view/index/index.js"))
 import App from "./App.js";
 //let List = [ { path:"/",component:lazy(()=>import(/* webpackChunkName: "Index" */ "../view/index/index.js"))}];
+
 class Routers extends Component{
 
 state={
@@ -25,28 +22,18 @@ componentWillMount(){
 
   render(){
     const {List} = this.state;
-      return  <Router>
-           <Switch>
-               {
+      return <Switch>
+              {
                 List.map((item,ind)=>{
-                  return <Route exact path={item.path} key={ind}
-                            render={(props)=>(
-                              <Suspense fallback={Load()}>
-                                  <item.component {...props} />
-                              </Suspense>
-                            )}
-                          >
-                     
-                  </Route>
-                })
-               }
-               {/* <Route exact path="/">
-                   <Suspense fallback={Load()}>
-                     <Demo />
-                   </Suspense>
-               </Route> */}
-           </Switch>
-      </Router>
+                    return <Route exact path={item.path} key={ind}>
+                                  <Suspense fallback={Load()}>
+                                    <item.component />
+                                  </Suspense>
+                            </Route>
+                  })
+                }
+              </Switch>
+                                     
   }
 }
 export default Routers
\ No newline at end of file

src/view/index/index.js

@@ -2,6 +2,7 @@ import React,{Component} from 'react';
 import PropTypes from 'prop-types';
 import{connect} from "react-redux";
 import EVENT from "../../store/EVENT"
+import {Link} from "react-router-dom";
 import $http from "../../service";
 //import * as utils from "../../utils/index";
 @connect((state)=>{
@@ -20,6 +21,9 @@ import $http from "../../service";
              .then(d=>{
                  debugger
              })
+             .catch(e=>{
+                 debugger
+             })
     }
     /**
      * @name 同步修改
@@ -56,7 +60,7 @@ import $http from "../../service";
     render(){
         let { layout,login} = this.props;
        // console.log(layout,login)
-        return  <article>
+        return  <article><Link to="/system/index2">go</Link>
             {
                 this.state.list.map((item,ind)=>{
                 return <span style={{margin:10}} onClick={this.EventClickSetList.bind(this,item,ind)} key={ind}>{item}</span>