asb_cloud_front/src/pages/Well.jsx

import { Layout, Menu } from "antd";
import {
  FolderOutlined,
  FundViewOutlined,
  AlertOutlined,
  FilePdfOutlined,
  DatabaseOutlined,
} from "@ant-design/icons";
import { Link, Redirect, Route, Switch, useParams } from "react-router-dom";
import TelemetryView from "./TelemetryView";
import Messages from "./Messages";
import Report from "./Report";
import Archive from "./Archive";
import Documents from "./Documents";
import Measure from "./Measure";
import { makeMenuItems } from "./Documents/menuItems";
import WellOperations from "./WellOperations";
import DrillingProgram from "./DrillingProgram";

const { Content } = Layout;

export default function Well() {
  let { idWell, tab } = useParams();
  const rootPath = `/well/${idWell}`;

  const { SubMenu } = Menu;

  return (
    <>
      <Layout>
        <Menu
          mode="horizontal"
          selectable={true}
          selectedKeys={[tab]}
          className="well_menu"
        >
          <Menu.Item key="telemetry" icon={<FundViewOutlined />}>
            <Link to={`${rootPath}/telemetry`}>Мониторинг</Link>
          </Menu.Item>
          <Menu.Item key="message" icon={<AlertOutlined />}>
            <Link to={`${rootPath}/message`}>Сообщения</Link>
          </Menu.Item>
          <Menu.Item key="report" icon={<FilePdfOutlined />}>
            <Link to={`${rootPath}/report`}>Рапорт</Link>
          </Menu.Item>
          <Menu.Item key="operations" icon={<FolderOutlined />}>
            <Link to={`${rootPath}/operations/plan`}>Операции по скважине</Link>
          </Menu.Item>
          <Menu.Item key="archive" icon={<DatabaseOutlined />}>
            <Link to={`${rootPath}/archive`}>Архив</Link>
          </Menu.Item>
          <SubMenu
            key="document"
            title={
              <Link
                to={`${rootPath}/document/fluidService`}
                className="linkDocuments"
              >
                Документы
              </Link>
            }
            icon={<FolderOutlined />}
            selectable={true}
          >
            {makeMenuItems(rootPath)}
          </SubMenu>
          <Menu.Item key="measure" icon={<FolderOutlined />}>
            <Link to={`${rootPath}/measure`}>Измерения</Link>
          </Menu.Item>
          <Menu.Item key="drillingProgram" icon={<FolderOutlined />}>
            <Link to={`${rootPath}/drillingProgram`}>Программа бурения</Link>
          </Menu.Item>
        </Menu>

        <Layout>
          <Content className="site-layout-background">
            <Switch>
              <Route path="/well/:idWell/telemetry">
                <TelemetryView idWell={idWell} />
              </Route>
              <Route path="/well/:idWell/message">
                <Messages idWell={idWell} />
              </Route>
              <Route path="/well/:idWell/report">
                <Report idWell={idWell} />
              </Route>
              <Route path="/well/:idWell/operations/:tab">
                <WellOperations idWell={idWell} />
              </Route>
              <Route path="/well/:idWell/archive">
                <Archive idWell={idWell} />
              </Route>
              <Route path="/well/:idWell/document/:category">
                <Documents idWell={idWell} />
              </Route>
              <Route path="/well/:id/measure">
                <Measure idWell={idWell}/>
              </Route>
              <Route path="/well/:id/drillingProgram">
                <DrillingProgram idWell={idWell}/>
              </Route>
              <Route path="/">
                <Redirect to={`${rootPath}/telemetry`} />
              </Route>
            </Switch>
          </Content>
        </Layout>
      </Layout>
    </>
  );
}