save

src/App.js

@@ -66,14 +66,7 @@ class App extends Component {
                 <div className={classnames('tabbar', {'tarbar-hidden': tabHidden})}>
                     <Row>
                         <NavLink exact to="/">
-                            <Col className={this.chooseClassNames('home')} span={8} onClick={() => {
-                                this.props.history.push({
-                                    pathname: '/home'
-                                })
-                                this.setState({
-                                    selectedTab: 'home'
-                                })
-                            }}>
+                            <Col className={this.chooseClassNames('home')} span={8}>
                                 {
                                     selectedTab === 'home' ?
                                         <HomeSelectedIcon/>
@@ -86,14 +79,7 @@ class App extends Component {
                             </Col>
                         </NavLink>
                         <NavLink to="/cart">
-                            <Col className={this.chooseClassNames('cart')} span={8} onClick={() => {
-                                this.props.history.push({
-                                    pathname: '/cart'
-                                })
-                                this.setState({
-                                    selectedTab: 'cart'
-                                })
-                            }}>
+                            <Col className={this.chooseClassNames('cart')} span={8}>
                                 {
                                     selectedTab === 'cart' ?
                                         <CartSelectedIcon/>
@@ -106,14 +92,7 @@ class App extends Component {
                             </Col>
                         </NavLink>
                         <NavLink to="/my">
-                            <Col className={this.chooseClassNames('my')} span={8} onClick={() => {
-                                this.props.history.push({
-                                    pathname: '/my'
-                                })
-                                this.setState({
-                                    selectedTab: 'my'
-                                })
-                            }}>
+                            <Col className={this.chooseClassNames('my')} span={8}>
                                 {
                                     selectedTab === 'my' ?
                                         <MySelectedIcon/>

src/pages/home/all/index.js

@@ -4,6 +4,7 @@ import {Query} from "react-apollo"
 import gql from "graphql-tag"
 import {Grid, Carousel, WhiteSpace, ActivityIndicator} from 'antd-mobile'
 import './index.css'
+import {withRouter} from 'react-router-dom'
 
 class All extends Component {
     constructor(props) {
@@ -56,7 +57,6 @@ class All extends Component {
                 id: 'more'
             }
         ]
-        let {changePageInHome} = this.props
         return (
             <div>
                 <Carousel
@@ -87,7 +87,12 @@ class All extends Component {
                     data={data}
                     hasLine={false}
                     onClick={(kind)=>{
-                        changePageInHome('kind', {id: kind.id})
+                        this.props.history.push({
+                            pathname: '/home/kind',
+                            state: {
+                                id: kind.id
+                            }
+                        })
                     }}/>
                 <WhiteSpace/>
                 <div className='guess-wrap'>
@@ -105,10 +110,7 @@ class All extends Component {
                                     return 'error!'
                                 }
                                 return (
-                                    <Like
-                                        data={data.productbyprops}
-                                        changePageInHome={changePageInHome}
-                                    />
+                                    <Like data={data.productbyprops} history={this.props.history}/>
                                 )
                             }
                         }
@@ -134,7 +136,12 @@ class Like extends Component {
                       columnNum={2}
                       hasLine={false}
                       onClick={(guess)=>{
-                          changePageInHome('detail', {id: guess.id})
+                          this.props.history.push({
+                              pathname: 'detail',
+                              state: {
+                                  id: guess.id
+                              }
+                          })
                       }}
                       renderItem={dataItem => (
                           <div key={dataItem.id} className='guess-item'>
@@ -151,4 +158,4 @@ class Like extends Component {
     }
 }
 
-export default All
+export default withRouter(All)

src/pages/home/index.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react'
 import './index.css'
+import {Switch, Route} from 'react-router-dom'
 import All from './all'
 import Kind from './kind'
 import Detail from './detail'
@@ -8,40 +9,20 @@ class Home extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            page: 'all',
-            param: {}
-        }
-    }
-
-    changePageInHome = (page, param, hidden) => {
-        this.props.changeTabBar('home', hidden !== undefined ? hidden : true)
-        this.setState({
-            page,
-            param: param ? param : {}
-        })
-    }
-
-    renderPage = () => {
-        let {page, param} = this.state
 
-        switch (page) {
-            case 'all':
-                return <All changePageInHome={this.changePageInHome} {...param}/>
-            case 'kind':
-                return <Kind changePageInHome={this.changePageInHome} {...param}/>
-            case 'detail':
-                return <Detail changePageInHome={this.changePageInHome} {...param}/>
-            default:
-                return <div>这个页面不应该出现是</div>
         }
     }
 
     render() {
         return (
             <div style={{height: '100%'}}>
-                {
-                    this.renderPage()
-                }
+                <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>
         )
     }