处理冲突

src/App.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react'
 import {Row, Col, Icon} from 'antd'
-import {BrowserRouter as Router, Switch, Route, NavLink} from 'react-router-dom'
+import {Switch, Route, NavLink, withRouter} from 'react-router-dom'
 import classnames from 'classnames'
 
 import Home from './pages/home'
@@ -18,11 +18,24 @@ class App extends Component {
         }
     }
 
-    changeTabBar = (tab, hidden) => {
-        this.setState({
-            selectedTab: tab,
-            tabHidden: hidden !== undefined ? hidden : false
-        })
+    componentWillMount() {
+        let {location} = this.props,
+            pathname = location.pathname,
+            state = location.state
+
+        // 有 state 的话，就隐藏 tabbar
+        if (location && state) {
+            this.setState({
+                tabHidden: true
+            })
+        }
+
+        // 根据 pathname 显示 icon 选中
+        if (location && pathname) {
+            this.setState({
+                selectedTab: pathname.substr(1) === ''? 'home' : pathname.substr(1)
+            })
+        }
     }
 
     chooseClassNames = (tabbar) => (
@@ -36,71 +49,84 @@ class App extends Component {
     render() {
         let {selectedTab, tabHidden} = this.state
         return (
-            <Router>
-                <div>
-                    <div className={classnames('tabbar', {'tarbar-hidden': tabHidden})}>
-                        <Row>
-                            {/*navlink 的 activeClass 有点问题*/}
-                            <NavLink exact to="/">
-                                <Col className={this.chooseClassNames('home')} span={8} onClick={() => {
-                                    this.changeTabBar('home')
-                                }}>
-                                    {
-                                        selectedTab === 'home' ?
-                                            <HomeSelectedIcon/>
-                                            :
-                                            <HomeUnselectedIcon/>
-                                    }
-                                    <div className='tabbar-title'>
-                                        主页
-                                    </div>
-                                </Col>
-                            </NavLink>
-                            <NavLink to="/cart">
-                                <Col className={this.chooseClassNames('cart')} span={8} onClick={() => {
-                                    this.changeTabBar('cart')
-                                }}>
-                                    {
-                                        selectedTab === 'cart' ?
-                                            <CartSelectedIcon/>
-                                            :
-                                            <CartUnselectedIcon/>
-                                    }
-                                    <div className='tabbar-title'>
-                                        购物篮
-                                    </div>
-                                </Col>
-                            </NavLink>
-                            <NavLink to="/my">
-                                <Col className={this.chooseClassNames('my')} span={8} onClick={() => {
-                                    this.changeTabBar('my')
-                                }}>
-                                    {
-                                        selectedTab === 'my' ?
-                                            <MySelectedIcon/>
-                                            :
-                                            <MyUnselectedIcon/>
-                                    }
-                                    <div className='tabbar-title'>
-                                        我
-                                    </div>
-                                </Col>
-                            </NavLink>
-                        </Row>
-                    </div>
-                    <Switch>
-                        <Route exact path="/" component={Home}/>
-                        <Route path="/home" component={Home}/>
-                        <Route path="/cart" component={Cart}/>
-                        <Route path="/my" component={My}/>
-                    </Switch>
+            <div>
+                <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'
+                                })
+                            }}>
+                                {
+                                    selectedTab === 'home' ?
+                                        <HomeSelectedIcon/>
+                                        :
+                                        <HomeUnselectedIcon/>
+                                }
+                                <div className='tabbar-title'>
+                                    主页
+                                </div>
+                            </Col>
+                        </NavLink>
+                        <NavLink to="/cart">
+                            <Col className={this.chooseClassNames('cart')} span={8} onClick={() => {
+                                this.props.history.push({
+                                    pathname: '/cart'
+                                })
+                                this.setState({
+                                    selectedTab: 'cart'
+                                })
+                            }}>
+                                {
+                                    selectedTab === 'cart' ?
+                                        <CartSelectedIcon/>
+                                        :
+                                        <CartUnselectedIcon/>
+                                }
+                                <div className='tabbar-title'>
+                                    购物篮
+                                </div>
+                            </Col>
+                        </NavLink>
+                        <NavLink to="/my">
+                            <Col className={this.chooseClassNames('my')} span={8} onClick={() => {
+                                this.props.history.push({
+                                    pathname: '/my'
+                                })
+                                this.setState({
+                                    selectedTab: 'my'
+                                })
+                            }}>
+                                {
+                                    selectedTab === 'my' ?
+                                        <MySelectedIcon/>
+                                        :
+                                        <MyUnselectedIcon/>
+                                }
+                                <div className='tabbar-title'>
+                                    我
+                                </div>
+                            </Col>
+                        </NavLink>
+                    </Row>
                 </div>
-            </Router>
+                <Switch>
+                    <Route exact path="/" component={Home}/>
+                    <Route path="/home" component={Home}/>
+                    <Route path="/cart" component={Cart}/>
+                    <Route path="/my" component={My}/>
+                </Switch>
+            </div>
+
         )
     }
 }
 
-export default App
+export default withRouter(App)
 
 const HomeUnselectedIcon = () => (
     <Icon type="home" style={{fontSize: 22}}/>

src/index.js

@@ -6,6 +6,7 @@ import ApolloClient from "apollo-boost"
 import {ApolloProvider} from "react-apollo"
 
 import {graphqlFC} from "./configs/url"
+import {BrowserRouter as Router} from 'react-router-dom'
 
 const client = new ApolloClient({
     uri: graphqlFC
@@ -13,7 +14,9 @@ const client = new ApolloClient({
 
 ReactDOM.render(
     <ApolloProvider client={client}>
-        <App/>
+        <Router>
+            <App/>
+        </Router>
     </ApolloProvider>,
     document.getElementById('root')
 )

src/pages/cart/CartEdit.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Checkbox, WhiteSpace,Modal,Toast } from 'antd-mobile';
 import classNames from 'classnames';
+// import { Query,Mutation } from "react-apollo";
 
 const alert = Modal.alert;
 
@@ -94,11 +95,11 @@ class CartEdit extends Component {
                             cartList:cartList
                         });
                         Toast.info('删除成功', 1);
+                        this.sumCount();
                         setTimeout(resolve, 1000);
                     }),
             },
         ]);
-        this.sumCount();
     };
 
     //删除

src/pages/cart/empty/index.js

@@ -1,31 +1,30 @@
-import React, {Component} from 'react';
-import {withRouter} from "react-router-dom";
+import React, {Component} from 'react'
+import {withRouter} from "react-router-dom"
 
-import cart_empty from '../../../images/cart_empty.jpg';
-import './index.css';
+import cart_empty from '../../../images/cart_empty.jpg'
+import './index.css'
 
 class Empty extends Component {
     constructor(props) {
-        super(props);
+        super(props)
         this.state = {}
     }
 
     render() {
-        let contentHeight = window.innerHeight - 95;
+        let contentHeight = window.innerHeight - 95
 
         return (
-            <div className="cart-empty" style={{height:contentHeight}} >
+            <div className="cart-empty" style={{height: contentHeight}}>
                 <div>
                     <img src={cart_empty} alt="img" width={100}/>
                 </div>
                 <div>购物车空空如此</div>
                 <div>
                     <button className="empty-button"
-                            onClick={()=>{
-                                window.location = '/#tab=my'
-                            //     this.props.history.push({
-                            //         pathname: `/`
-                            // })
+                            onClick={() => {
+                                this.props.history.push({
+                                    pathname: `/`
+                                })
                             }}>
                         去逛逛
                     </button>
@@ -35,4 +34,4 @@ class Empty extends Component {
     }
 }
 
-export default withRouter(Empty);
+export default withRouter(Empty)