forgeplus-react/src/forge/Settings/Index.js

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

import "../css/index.css";
import "./setting.css";

import Loadable from "react-loadable";
import Loading from "../../Loading";

const Branch = Loadable({
  loader: () => import("./Branch"),
  loading: Loading,
});
const Setting = Loadable({
  loader: () => import("./Setting"),
  loading: Loading,
});
const Collaborator = Loadable({
  loader: () => import("./Collaborator"),
  loading: Loading,
});
const Tags = Loadable({
  loader: () => import("./new_tags"),
  loading: Loading,
});
class Index extends Component {
  render() {
    const { projectsId } = this.props.match.params;
    const { pathname } = this.props.history.location;

    const flag = pathname === `/projects/${projectsId}/setting`;
    return (
      <div className="ProjectListIndex">
        <div className="list-left">
          <ul className="list-l-Menu">
            <li className={flag ? "active" : ""}>
              <p>
                <Link to={`/projects/${projectsId}/setting`} className="w-100">
      
                <i className="iconfont icon-huabanfuben font-18 mr10"></i>基本设置
                  </Link>
              </p>
            </li>
            <li
              className={
                pathname.indexOf("setting/collaborator") > -1 ? "active" : ""
              }
            >
              <p>
                <Link to={`/projects/${projectsId}/setting/collaborator`} className="w-100">
                <i className="iconfont icon-chengyuan font-18 mr10"></i>
                  协作者管理
                </Link>
              </p>
            </li>
            {/* <li
              className={
                pathname.indexOf("setting/branch") > -1 ? "active" : ""
              }
            >
              <p>
                <Link to={`/projects/${projectsId}/setting/branch`} className="w-100">
                <i className="iconfont icon-fenzhi font-20 mr10"></i>
                  分支设置
                </Link>
  
              </p>
            </li> */}
            <li
              className={pathname.indexOf("setting/tags") > -1 ? "active" : ""}
            >
              <p>
                <Link to={`/projects/${projectsId}/setting/tags`} className="w-100">
                <i className="iconfont icon-biaoqian3 font-18 mr10"></i>
                  项目标签
                </Link>
              </p>
            </li>

            {/* <li
              className={
                pathname.indexOf("setting/hooks") > -1 ? "active" : ""
              }
            >
              <p>
                <Link to={"javascript:void(0)"} className="w-100">
                <i className="iconfont icon-zhongqingdianxinicon10 font-18 mr10"></i>
                  管理Web钩子
                </Link>
              </p>
            </li> */}
          </ul>
        </div>
        <div className="list-right">
          <div>
            <Switch {...this.props}>
              {/* 协作者 */}
              <Route
                path="/projects/:projectsId/setting/collaborator"
                render={(props) => (
                  <Collaborator {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              {/* 修改仓库信息 */}
              <Route
                path="/projects/:projectsId/setting/tags"
                render={(props) => (
                  <Tags {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              {/* 修改仓库信息 */}
              <Route
                path="/projects/:projectsId/setting"
                render={(props) => (
                  <Setting {...this.props} {...props} {...this.state} />
                )}
              ></Route>
            </Switch>
          </div>
        </div>
      </div>
    );
  }
}
export default Index;