index.js

import React, { Component } from "react"
import "./study.scss"

import { NavLink, Route, Switch, Redirect } from "react-router-dom"
import MyCourses from "./myCourses"
import FreeCourses from "./freeCourses"
import WithTab from "src/HOCs/WithTab"
import WithFullSize from "src/HOCs/WithFullSize"
import { compose } from "redux"

class Study extends Component {
  state = {
    position: {},
  }

  render() {
    const { match } = this.props
    return (
      <section id="study">
        <div className="tab">
          <div>
            <NavLink
              to={`${match.url}/my-course`}
              replace
              activeClassName="active"
            >
              我的课程
            </NavLink>
          </div>
          <div>
            <NavLink
              to={`${match.url}/free-course`}
              replace
              activeClassName="active"
            >
              免费课程
            </NavLink>
          </div>
        </div>
        <div className="study-container">
          <Switch>
            <Redirect exact from="/study" to="study/my-course" />
            <Route
              path={`${this.props.match.path}/my-course`}
              component={MyCourses}
            />
            <Route
              path={`${this.props.match.path}/free-course`}
              component={FreeCourses}
            />
          </Switch>
        </div>
      </section>
    )
  }
}

export default compose(WithFullSize, WithTab)(Study)