跳转

src/App.js

@@ -13,21 +13,18 @@ class App extends Component {
         super(props)
         this.state = {
             selectedTab: 'home',
-            tabHidden: false,
-            page: 'detail'
+            tabHidden: false
         }
     }
 
     componentWillMount() {
-        console.log('this.props',this.props)
         let {location} = this.props,
             pathname = location.pathname
 
         // 根据首次的 pathname 显示 icon 选中
-        console.log(pathname)
         if (location && pathname) {
             this.setState({
-                selectedTab: pathname.substr(1) === '' ? 'home' : pathname.substr(1)
+                selectedTab: pathname.split('/')[1] === '' ? 'home' : pathname.split('/')[1]
             })
         }
     }
@@ -47,32 +44,23 @@ class App extends Component {
         // 根据非首次的 pathname 显示 icon 选中
         if (location && pathname) {
             this.setState({
-                selectedTab: pathname.substr(1) === '' ? 'home' : pathname.substr(1)
+                selectedTab: pathname.split('/')[1] === '' ? 'home' : pathname.split('/')[1]
             })
         }
     }
 
-    chooseClassNames = (tabbar) => (
-        classnames(
-            {'tabbar-content': true},
-            {'tabbar-inactive': this.state.selectedTab !== tabbar},
-            {'tabbar-active': this.state.selectedTab === tabbar}
-        )
-    )
-
-     isActiveFunc = (match, location) => {
-        console.log(match,'contact')
-        return match
+    isActiveFunc = (navKind) => (match, location) => {
+        return navKind === location.pathname.split('/')[1]
     }
 
     render() {
         let {selectedTab, tabHidden} = this.state
         return (
             <div>
-                <div className="tabbar1">
+                <div className={classnames('tabbar', {'tarbar-hidden': tabHidden})}>
                     <Row>
-                        <Col span={8}>
-                            <NavLink exact activeClassName="active" to="/">
+                        <Col span={8} className='tabbar-content'>
+                            <NavLink exact isActive={this.isActiveFunc('home')} activeClassName="active" to="/">
                                 {
                                     selectedTab === 'home' ?
                                         <HomeSelectedIcon/>
@@ -84,8 +72,8 @@ class App extends Component {
                                 </div>
                             </NavLink>
                         </Col>
-                        <Col span={8}>
-                            <NavLink activeClassName="active" to={{pathname: '/cart'}}>
+                        <Col span={8} className='tabbar-content'>
+                            <NavLink isActive={this.isActiveFunc('cart')} activeClassName="active" to="/cart">
                                 {
                                     selectedTab === 'cart' ?
                                         <CartSelectedIcon/>
@@ -97,8 +85,8 @@ class App extends Component {
                                 </div>
                             </NavLink>
                         </Col>
-                        <Col span={8}>
-                            <NavLink isActive={this.isActiveFunc} activeClassName="active" to="/my">
+                        <Col span={8} className='tabbar-content'>
+                            <NavLink isActive={this.isActiveFunc('my')} activeClassName="active" to="/my">
                                 {
                                     selectedTab === 'my' ?
                                         <MySelectedIcon/>
@@ -111,50 +99,6 @@ class App extends Component {
                             </NavLink>
                         </Col>
                     </Row>
-
-                </div>
-                <div className={classnames('tabbar', {'tarbar-hidden': tabHidden})}>
-                    <Row>
-                        <NavLink exact to="/">
-                            <Col className={this.chooseClassNames('home')} span={8}>
-                                {
-                                    selectedTab === 'home' ?
-                                        <HomeSelectedIcon/>
-                                        :
-                                        <HomeUnselectedIcon/>
-                                }
-                                <div className='tabbar-title'>
-                                    主页
-                                </div>
-                            </Col>
-                        </NavLink>
-                        <NavLink to="/cart">
-                            <Col className={this.chooseClassNames('cart')} span={8}>
-                                {
-                                    selectedTab === 'cart' ?
-                                        <CartSelectedIcon/>
-                                        :
-                                        <CartUnselectedIcon/>
-                                }
-                                <div className='tabbar-title'>
-                                    购物篮
-                                </div>
-                            </Col>
-                        </NavLink>
-                        <NavLink to="/my">
-                            <Col className={this.chooseClassNames('my')} span={8}>
-                                {
-                                    selectedTab === 'my' ?
-                                        <MySelectedIcon/>
-                                        :
-                                        <MyUnselectedIcon/>
-                                }
-                                <div className='tabbar-title'>
-                                    我
-                                </div>
-                            </Col>
-                        </NavLink>
-                    </Row>
                 </div>
                 <Switch>
                     <Route exact path="/" component={Home}/>

src/app.css

@@ -9,17 +9,6 @@
     text-align: center;
 }
 
-.tabbar1 {
-    width: 100%;
-    height: 50px;
-    position: fixed;
-    top: 0;
-    background-color: white;
-    z-index: 1;
-    border-top: 1px solid #F3F3F3;
-    text-align: center;
-}
-
 .tabbar-content {
     display: flex;
     flex-direction: column;
@@ -52,7 +41,7 @@ a.active {
     text-decoration: none;
 }
 
-a{
+a {
     color: #b9b9b9;
     text-decoration: none;
 }

src/pages/home/all/index.js

@@ -128,7 +128,7 @@ class Like extends Component {
     }
 
     render() {
-        let {data, changePageInHome} = this.props
+        let {data} = this.props
         return (
             <div className='guess-wrapper'>
                 <div className='guess-title'>- 猜你喜欢 -</div>
@@ -137,7 +137,7 @@ class Like extends Component {
                       hasLine={false}
                       onClick={(guess)=>{
                           this.props.history.push({
-                              pathname: 'detail',
+                              pathname: '/home/detail',
                               state: {
                                   id: guess.id
                               }

src/pages/home/detail/index.js

@@ -4,6 +4,7 @@ import {productbyid} from "../../../utils/gql"
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
 import './index.css'
+import {withRouter} from 'react-router-dom'
 
 class Detail extends Component {
     constructor(props) {
@@ -20,7 +21,7 @@ class Detail extends Component {
                         className='detail-navbar'
                         mode="light"
                         icon={<Icon type="left"/>}
-                        onLeftClick={() => changePageInHome('all', {}, false)}
+                        onLeftClick={() => {this.props.history.push({pathname: '/'})}}
                         rightContent={[
                             <Icon key="1" type="ellipsis"/>,
                         ]}
@@ -52,7 +53,7 @@ class Detail extends Component {
     }
 }
 
-export default Detail
+export default withRouter(Detail)
 
 class DetailRender extends Component {
     constructor(props) {

src/pages/home/index.js

@@ -1,32 +1,21 @@
-import React, {Component} from 'react'
+import React from 'react'
 import './index.css'
 import {Switch, Route} from 'react-router-dom'
 import All from './all'
 import Kind from './kind'
 import Detail from './detail'
 
-class Home extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-
-        }
-    }
-
-    render() {
-        return (
-            <div style={{height: '100%'}}>
-                <Switch>
-                    <Route exact path="/" component={All}/>
-                    <Route path="/home" component={All}/>
-                    <Route path="/home/all" component={All}/>
-                    <Route path="/home/kind" component={Kind}/>
-                    <Route path="/home/detail" component={Detail}/>
-                </Switch>
-            </div>
-        )
-    }
-}
+const Home = () => (
+    <div style={{height: '100%'}}>
+        <Switch>
+            <Route exact path="/" component={All}/>
+            <Route exact path="/home" component={All}/>
+            <Route path="/home/all" component={All}/>
+            <Route path="/home/kind" component={Kind}/>
+            <Route path="/home/detail" component={Detail}/>
+        </Switch>
+    </div>
+)
 
 export default Home
 

src/pages/home/kind/index.js

@@ -5,6 +5,7 @@ import './index.css'
 import {productbyprops} from "../../../utils/gql"
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
+import {withRouter} from 'react-router-dom'
 
 const Search = Input.Search
 
@@ -23,7 +24,7 @@ class Kind extends Component {
                         className='kind-navbar'
                         mode="light"
                         icon={<Icon type="left"/>}
-                        onLeftClick={() => changePageInHome('all', {}, false)}
+                        onLeftClick={() => {this.props.history.push({pathname: '/'})}}
                         rightContent={[
                             <Icon key="1" type="ellipsis"/>,
                         ]}
@@ -64,7 +65,7 @@ class Kind extends Component {
     }
 }
 
-export default Kind
+export default withRouter(Kind)
 
 class KindRender extends Component {
     constructor(props) {