forgeplus-react/src/forge/Team/Setting/TeamSettingIndex.jsx

import React , { useEffect , useState } from 'react';
import { Box , Long , Short , Gap } from '../../Component/layout';
import Title from '../../Component/Title';
import Setnav from '../../Component/Setnav';

import { Route, Switch } from "react-router-dom";
import Loadable from "react-loadable";
import Loading from "../../../Loading";


const Group = Loadable({
  loader: () => import("./TeamSettingGroup"),
  loading: Loading,
});
const Member = Loadable({
  loader: () => import("./TeamSettingMember"),
  loading: Loading,
});
const Common = Loadable({
  loader: () => import("./TeamSettingCommon"),
  loading: Loading,
});
const Hooks = Loadable({
  loader: () => import("./TeamSettingHooks"),
  loading: Loading,
});
export default (( props )=>{
  const pathname = props.location.pathname;
  const OIdentifier = props.match.params.OIdentifier;

  function returnActive (pathname){
    let a = 0;
    if(pathname === `/${OIdentifier}/setting/member`){
      a = 1;
    }else if(pathname === `/${OIdentifier}/setting/group`){
      a = 2;
    }else if(pathname === `/${OIdentifier}/setting/hooks`){
      a = 3;
    }
    return a;
  }
  const active = returnActive(pathname);
  const array = {list:[
    {name:'基本设置',icon:"icon-base",href:`/${OIdentifier}/setting`},
    {name:'组织成员管理',icon:"icon-zuzhichengyuan",href:`/${OIdentifier}/setting/member`},
    {name:'组织团队管理',icon:"icon-zuzhixiangmu",href:`/${OIdentifier}/setting/group`},
    // {name:'管理web钩子',icon:"icon-zhongqingdianxinicon10",href:`/${OIdentifier}/setting/hooks`}
  ],
    active
  }
  return(
    <Box>
      <Short>
        <Setnav header={<Title>组织设置</Title>} nav={array}></Setnav>
      </Short>
      <Long>
        <Gap >
          <div style={{border:"1px solid #eee"}}>
            <Switch>
            <Route
              path="/:OIdentifier/setting/hooks"
              render={() => (
                <Hooks {...props} />
              )}
            ></Route>
            <Route
              path="/:OIdentifier/setting/group"
              render={() => (
                <Group {...props} />
              )}
            ></Route>
            <Route
              path="/:OIdentifier/setting/member"
              render={() => (
                <Member {...props} />
              )}
            ></Route>
            <Route
              path="/:OIdentifier/setting"
              render={() => (
                <Common {...props} />
              )}
            ></Route>
          </Switch>
          </div>
        </Gap>
      </Long>
    </Box>
  )
})