forgeplus-react/src/forge/Main/CoderRootIndex.js

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

import Loadable from 'react-loadable';
import Loading from '../../Loading';
import Top from './DetailTop';


const CoderRootDirectory = Loadable({
	loader: () => import('./CoderRootDirectory'),
	loading: Loading,
})
const CoderRootCommit = Loadable({
	loader: () => import('./CoderRootCommit'),
	loading: Loading,
})
const CoderRootBranch = Loadable({
	loader: () => import('./CoderRootBranch'),
	loading: Loading,
})
const CoderRootTag = Loadable({
  loader: () => import('./CoderRootTag'),
  loading: Loading,
})
const CoderRootVersion = Loadable({
  loader: () => import('../Version/version'),
  loading: Loading,
})
const CoderRootVersionNew = Loadable({
  loader: () => import('../Version/New'),
  loading: Loading,
})
const CoderRootVersionUpdate = Loadable({
  loader: () => import('../Version/New'),
  loading: Loading,
})

class CoderRootIndex extends Component{
  
  render(){
    return(
      <div>
        <Top {...this.props} {...this.state}/>
        <Switch {...this.props}>
          <Route path="/projects/:projectsId/coders/commit"
            render={
              (props) => (<CoderRootCommit {...this.props} {...props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:projectsId/coders/version/new"
            render={
              (props) => (<CoderRootVersionNew {...this.props} {...props} {...this.state} />)
            }
          ></Route>

          <Route path="/projects/:projectsId/coders/version/:versionId/update"
            render={
              (props) => (<CoderRootVersionUpdate {...this.props} {...props} {...this.state} />)
            }
          ></Route>
          
          <Route path="/projects/:projectsId/coders/version"
            render={
              (props) => (<CoderRootVersion {...this.props} {...props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:projectsId/coders/tag"
            render={
              (props) => (<CoderRootTag {...this.props} {...props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:projectsId/coders/branch"
            render={
              (props) => (<CoderRootBranch {...this.props} {...props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:projectsId/coders"
            render={
              (props) => (<CoderRootDirectory {...this.props} {...props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:projectsId"
            render={
              (props) => (<CoderRootDirectory {...this.props} {...props} {...this.state} />)
            }
          ></Route>
        </Switch>
      </div>
    )
  }
}
export default CoderRootIndex;