feat: 二级导航路由跳转

client/Application.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Route, HashRouter, Redirect, Switch } from 'react-router-dom';
-import { Home, ProjectGroups, Interface, News, AddInterface } from './containers/index';
+import { Home, ProjectGroups, Interface, News, AddInterface, Follows } from './containers/index';
 import User from './containers/User/User.js';
 import Header from './components/Header/Header';
 import Footer from './components/Footer/Footer';
@@ -58,6 +58,7 @@ export default class App extends Component {
               <Route path="/user" component={requireAuthentication(User)} />
               <Route path="/news" component={requireAuthentication(News)} />
               <Route path="/add-interface" component={requireAuthentication(AddInterface)} />
+              <Route path="/follow" component={requireAuthentication(Follows)} />
             </div>
             <Footer />
           </div>

client/components/Subnav/Subnav.js

@@ -1,5 +1,6 @@
 import './Subnav.scss';
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { Menu } from 'antd';
 
@@ -7,24 +8,25 @@ class Subnav extends Component {
   constructor(props) {
     super(props)
   }
+
   static propTypes = {
-    data: PropTypes.array
+    data: PropTypes.array,
+    default: PropTypes.string
   }
+
   render () {
-    console.log(this.props);
     return (
       <div className="m-subnav">
         <Menu
           onClick={this.handleClick}
-          selectedKeys={[this.props.data[0].name]}
-          defaultSelectedKeys={[this.props.data[0].name]}
+          defaultSelectedKeys={[this.props.default]}
           mode="horizontal"
           className="g-row m-subnav-menu"
         >
           {this.props.data.map((item, index) => {
             return (
               <Menu.Item className="item" key={item.name}>
-                {this.props.data[index].name}
+                <Link to={item.path}>{this.props.data[index].name}</Link>
               </Menu.Item>
             )
           })}
@@ -34,4 +36,4 @@ class Subnav extends Component {
   }
 }
 
-export default Subnav
+export default Subnav;

client/containers/Follows/Follows.js

@@ -1,28 +1,28 @@
 import React, { Component } from 'react';
+import './Follows.scss';
 import Subnav from '../../components/Subnav/Subnav.js';
-import { Row, Col } from 'antd';
-
-import './ProjectGroups.scss'
-
-export default class ProjectGroups extends Component {
-  constructor(props) {
-    super(props)
-  }
+console.log('js in');
 
+class Follows extends Component {
   render () {
+    console.log('render');
     return (
       <div>
-        <Subnav data={[{
-          name: '项目广场',
-          path: '/test'
-        }, {
-          name: '我的关注',
-          path: '/test'
-        }]}/>
-        <div className="g-doc">
-          doc
+        <Subnav
+          default={'我的关注'}
+          data={[{
+            name: '项目广场',
+            path: '/group'
+          }, {
+            name: '我的关注',
+            path: '/follow'
+          }]}/>
+        <div className="g-row">
+          我的关注页
         </div>
       </div>
     )
   }
 }
+
+export default Follows;

client/containers/Follows/Follows.scss

@@ -0,0 +1 @@
+@import '../../styles/common.scss';

client/containers/ProjectGroups/ProjectGroups.js

@@ -14,14 +14,16 @@ export default class ProjectGroups extends Component {
   render () {
     return (
       <div>
-        <Subnav data={[{
-          name: '项目广场',
-          path: '/test'
-        }, {
-          name: '我的关注',
-          path: '/test'
-        }]}/>
-        <div className="g-doc">
+        <Subnav
+          default={'项目广场'}
+          data={[{
+            name: '项目广场',
+            path: '/group'
+          }, {
+            name: '我的关注',
+            path: '/follow'
+          }]}/>
+        <div className="g-row">
           <Row gutter={16}>
             <Col span={6}>
               <GroupList></GroupList>

client/containers/index.js

@@ -6,6 +6,7 @@ import Interface from './Interface/Interface.js'
 import News from './News/News.js'
 import AddInterface from './AddInterface/AddInterface.js'
 import DevTools from './DevTools/DevTools.js'
+import Follows from './Follows/Follows.js'
 
 export {
   Header,
@@ -15,5 +16,6 @@ export {
   Interface,
   AddInterface,
   News,
-  DevTools
+  DevTools,
+  Follows
 }

client/routes.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Route, HashRouter } from 'react-router-dom'
-import { Header, Home, ProjectGroups, Interface, News, AddInterface } from './containers/index'
+import { Header, Home, ProjectGroups, Interface, News, AddInterface, Follows } from './containers/index'
 import User from './containers/User/User.js'
 
 export default () => {
@@ -17,6 +17,7 @@ export default () => {
         <Route path="/user" component={User} />
         <Route path="/news" component={ News } />
         <Route path="/add-interface" component={ AddInterface } />
+        <Route path="/follow" component={ Follows } />
       </div>
     </HashRouter>
   )