forgeplus-react/src/forge/Team/Sub/Detail.jsx

import React , { useEffect , useState } from 'react';
import { Route, Switch , Link } from "react-router-dom";
import Loadable from "react-loadable";
import Loading from "../../../Loading";
import {AlignCenter} from '../../Component/layout';
import Cards from '../../Component/Cards';
import axios from 'axios';
import '../Index.scss';

const GroupDetails = Loadable({
  loader: () => import("../Group/GroupDetails"),
  loading: Loading,
});
const Group = Loadable({
  loader: () => import("../TeamGroup"),
  loading: Loading,
});
const Member = Loadable({
  loader: () => import("../TeamMember"),
  loading: Loading,
});
const DetailIndex = Loadable({
  loader: () => import("../List"),
  loading: Loading,
});
const Setting = Loadable({
  loader: () => import("../Setting/TeamSettingIndex"),
  loading: Loading,
});
function Detail(props){
  const OIdentifier = props.match.params.OIdentifier;
  const pathname = props.location.pathname;

  const [ detail , setDetail ] = useState(undefined);
  const [ flag , setFlag ] = useState(true);
  const [ buttonflag , setButtonflagFlag ] = useState(false);

  // 设置页面：顶部不需要设置按钮了
  useEffect(()=>{
    if(pathname){
      if(pathname.indexOf(`/${OIdentifier}/setting`)>-1){
        setFlag(false);
      }else{
        setFlag(true);
      }
      if(pathname.indexOf(`/${OIdentifier}/group`)>-1 || pathname.indexOf(`/${OIdentifier}/member`)>-1){
        setButtonflagFlag(true);
      }else{
        setButtonflagFlag(false);
      }
    }
  },[pathname])

  useEffect(()=>{
    if(OIdentifier){
      getDetail(OIdentifier);
    }
  },[OIdentifier]);

  function getDetail(id) {
    const url = `/organizations/${id}.json`;
    axios.get(url).then(result=>{
      if(result && result.data){
        setDetail(result.data);
      }
    }).catch(error=>{})
  }

  function updateDetail(name,desc){
    let d = detail;
    d.name = name;
    d.description = desc;
    setDetail(d);
  }
  return(
    <div className="teamDetail">
      {
        detail &&
        <Cards
          src={`/organize/${detail.name}`}
          title={detail.nickname}
          desc={!buttonflag && detail.description}
          img={detail.avatar_url}
          rightBtn={
            <React.Fragment>
              {flag && !buttonflag && detail.is_admin ? 
                <Link to={`/${OIdentifier}/setting`} className="color-blue ml10 font-14">设置<i className="iconfont icon-shezhi2 ml3 fr"></i></Link>
              :""}
              {buttonflag && 
                <span className="subNavs">
                  <Link to={`/${OIdentifier}/member`} className={pathname ===`/${OIdentifier}/member` ? "active":""}><span>组织成员</span>{detail.num_users && <lable>{detail.num_users}</lable>}</Link>
                  <Link to={`/${OIdentifier}/group`} className={pathname ===`/${OIdentifier}/group` ? "active":""}><span>组织团队</span>{detail.num_teams &&<lable>{detail.num_teams}</lable>}</Link>
                </span>
              }
            </React.Fragment>
          }
          bottomInfos={
            !buttonflag && <div>
              {
                detail.location && 
                <span className="color-grey-6"><i className="iconfont icon-weizhi mr3 font-16 color-grey-6"></i>{detail.location}</span>
              }
              {
                detail.website && 
                <a href={detail.website} target="_blank" className="ml20 color-grey-6"><i className="iconfont icon-lianjie mr3 font-14"></i>{detail.website}</a>
              }
            </div>
          }
        />
      }
      <Switch {...props}>

        {/* 组织团队-详情 */}
        <Route
          path="/:OIdentifier/group/:groupId"
          render={(p) => {
            return <GroupDetails {...props} {...p} group={detail}/>
          }}
        ></Route>
        {/* 组织成员 */}
        <Route
          path="/:OIdentifier/member"
          render={(p) => {
            return <Member {...props} {...p} organizeDetail={detail}/>
          }}
        ></Route>
        {/* 组织团队 */}
        <Route
          path="/:OIdentifier/group"
          render={(p) => {
            return <Group {...props} {...p} organizeDetail={detail}/>
          }}
        ></Route>
        <Route
          path="/:OIdentifier/setting"
          render={(p) => {
            return <Setting {...props} {...p} organizeDetail={detail} updateFunc={updateDetail}/>
          }}
        ></Route>
        <Route
          path="/:OIdentifier"
          render={(p) => {
            return <DetailIndex {...props} {...p} organizeDetail={detail}/>
          }}
        ></Route>
      </Switch>
    </div>
  )
}
export default Detail;