forgeplus-react/src/forge/Index.js

import React, { Component } from 'react';

import { Route, Switch } from 'react-router-dom';
import { withRouter } from 'react-router'


import { SnackbarHOC } from 'educoder';
import { CNotificationHOC } from '../modules/courses/common/CNotificationHOC';
import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';

import './css/index.css';

import Loadable from 'react-loadable';
import Loading from '../Loading';
import { ImageLayerOfCommentHOC } from '../modules/page/layers/ImageLayerOfCommentHOC';

const ProjectNew = Loadable({
  loader: () => import('./New/Index'),
  loading: Loading,
})
const ProjectIndex = Loadable({
  loader: () => import('./Main/Index'),
  loading: Loading,
})

const ProjectDetail = Loadable({
  loader: () => import('./Main/Detail'),
  loading: Loading,
})

class Index extends Component {

  render() {
    return (
      <div className="newMain clearfix">
        <Switch {...this.props}>
          <Route path="/projects/:projectsType/new"
            render={
              (props) => (<ProjectNew {...this.props} {...props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:projectsId"
            render={
              (props) => (<ProjectDetail {...this.props} {...props} {...this.state} />)
            }
          ></Route>
          <Route exact path="/projects"
            render={
              (props) => (<ProjectIndex {...this.props} {...props} {...this.state} />)
            }
          ></Route>
          <Route exact path="/"
            render={
              (props) => (<ProjectIndex {...this.props} {...props} {...this.state}></ProjectIndex>)
            }
          />
        </Switch>
      </div>
    )
  }
}
export default withRouter(ImageLayerOfCommentHOC({ imgSelector: '.imageLayerParent img, .imageLayerParent .imageTarget', parentSelector: '.newMain' })(CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Index)))));