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

import React , { Component } from 'react';
import { Route , Switch } from 'react-router-dom';
import Top from './DetailTop';
import Loadable from 'react-loadable';
import Loading from '../../Loading';
import axios from 'axios';

const FileNew = Loadable({
  loader: () => import('../Newfile/Index'),
  loading: Loading,
})
const UploadFile = Loadable({
  loader: () => import('../Newfile/upload_file'),
  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,
})
const Diff =  Loadable({
  loader: () => import('./Diff'),
  loading: Loading,
})

class CoderRootIndex extends Component{
  constructor(props){
    super(props);
    this.state={
      coderCount:undefined
    }
  }

  componentDidMount=()=>{
    this.Init();
  }
  componentDidUpdate=(prevProps)=>{
    const { location } = this.props;
    const prevlocation = prevProps && prevProps.location;
    if (location !== prevlocation) {
      this.Init();
    }
  }

  Init=()=>{
    const { branchName } = this.props.match.params;
    const { defaultBranch } = this.props;
    this.getTopCount(branchName || defaultBranch);
  }

  // 获取<Top />组件里要显示的数据
  getTopCount=(branch)=>{
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/top_counts.json`;
    axios.get(url,{params:{
      ref:branch
    }}).then(result=>{
      if(result){
        this.setState({
          coderCount:result.data
        })
      }
    }).catch(error=>{console.log(error);})
  }
  render(){
    return(
      <div>
        <Top {...this.props} {...this.state}/>
        <Switch {...this.props}>
          {/* 新建文件 */}
          <Route path="/projects/:owner/:projectsId/:branch/newfile/:path"
            render={
              (props) => (<FileNew {...this.props} {...props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/:branch/uploadfile"
            render={
              (props) => (<UploadFile {...this.props} {...props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/:branch/newfile"
            render={
              (props) => (<FileNew {...this.props} {...props} {...this.state} getTopCount={this.getTopCount} />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/commits/branch/:branchName"
            render={
              () => (<CoderRootCommit {...this.props} {...this.state} commit_class="main" getTopCount={this.getTopCount}  />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/commits/:sha"
            render={
              (props) => (<Diff {...this.props} {...props} {...this.state}/>)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/commits"
            render={
              () => (<CoderRootCommit {...this.props} {...this.state} commit_class="main" getTopCount={this.getTopCount}  />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/releases/:versionId/update"
            render={
              (props) => (<CoderRootVersionUpdate {...this.props} {...this.state} {...props} />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/releases/new"
            render={
              () => (<CoderRootVersionNew {...this.props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/releases"
            render={
              () => (<CoderRootVersion {...this.props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/tag"
            render={
              () => (<CoderRootTag {...this.props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/branchs"
            render={
              () => (<CoderRootBranch {...this.props} {...this.state} />)
            }
          ></Route>
        </Switch>
      </div>
    )
  }
}
export default CoderRootIndex;