index.js

import React, { Component } from 'react'
import { NavLink, Route, Switch, Redirect } from "react-router-dom"
import myCoupons from "./myCoupons"
import myPatch from './myPatch'
import { HeaderBar } from "src/common";
import './coupons.scss'


class coupons extends Component {
    render() {
        const {match, location} = this.props;
        return (
            <div className={'coupons-box'}>
                <HeaderBar title='优惠券' arrow={true}/>
                <section id='coupons'>
                    <div className='tab'>
                        <div>
                            <NavLink to={{
                                pathname: `${match.url}/my-coupon`,
                                search: location.search,
                                state: {...this.props.location.state}
                            }}
                                     replace
                                     activeClassName='tab-active'
                            >我的优惠券</NavLink>
                        </div>
                        <div>
                            <NavLink to={{
                                pathname: `${match.url}/my-patch`,
                                search: location.search,
                                state: {...this.props.location.state}
                            }}
                                     replace
                                     activeClassName='tab-active'
                            >碎片合成</NavLink>
                        </div>
                    </div>
                    <div className="btm-border"></div>

                    <div className="coupons-container">
                        <Switch>
                            <Redirect exact from='/coupons' to={{
                                pathname: 'coupons/my-coupon', search: location.search, state: {
                                    from: this.props.location.state && this.props.location.state.from
                                }
                            }}/>
                            <Route path={`${this.props.match.path}/my-coupon`} component={myCoupons}/>
                            <Route path={`${this.props.match.path}/my-patch`} component={myPatch}/>
                        </Switch>
                    </div>
                </section>
            </div>
        )
    }

}

export default coupons;