asb_cloud_front/src/pages/Well.jsx

import { Layout, Menu } from "antd";
import { FolderOutlined, FundViewOutlined } from "@ant-design/icons";
import { Link, Redirect, Route, Switch, useParams } from "react-router-dom";
import TelemetryView from "./TelemetryView";
import Messages from "../pages/Messages";
import Report from "../pages/Report";
import Archive from "../pages/Archive";
import Analysis from "../pages/Analysis";
import WellAnalysis from "../pages/WellAnalysis";
import Documents from "../pages/Documents";
import LastData from '../pages/LastData'
import { makeMenuItems } from "./Documents/menuItems";
import WellStat from "./WellStat";
import Smbo from "./Smbo";

const { Content } = Layout;

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

  const { SubMenu } = Menu;

  return (
    <>
      <Layout>
        <Menu mode="horizontal" selectable={true} className="well_menu">
          <Menu.Item key="1" icon={<FundViewOutlined />}>
            <Link to={{ pathname: `${rootPath}/telemetry` }}>Мониторинг</Link>
          </Menu.Item>
          <Menu.Item key="2" icon={<FolderOutlined />}>
            <Link to={{ pathname: `${rootPath}/message` }}>Сообщения</Link>
          </Menu.Item>
          <Menu.Item key="3" icon={<FolderOutlined />}>
            <Link to={{ pathname: `${rootPath}/report` }}>Рапорт</Link>
          </Menu.Item>
          <Menu.Item key="4" icon={<FolderOutlined />}>
            <Link to={{ pathname: `${rootPath}/analysis` }}>Анализ</Link>
          </Menu.Item>
          <Menu.Item key="5" icon={<FolderOutlined />}>
            <Link to={{ pathname: `${rootPath}/wellAnalysis` }}>
              Операции по скважине
            </Link>
          </Menu.Item>
          <Menu.Item key="6" icon={<FolderOutlined />}>
            <Link to="stat">Статистика</Link>
          </Menu.Item>
          <Menu.Item key="7" icon={<FolderOutlined />}>
            <Link to={{ pathname: `${rootPath}/archive` }}>Архив</Link>
          </Menu.Item>
          <SubMenu
            key="documentsSub"
            title={
              <Link
                to={{ pathname: `${rootPath}/document/fluidService` }}
                className="linkDocuments">
                Документы
              </Link>
            }
            icon={<FolderOutlined />}
            selectable={true}
          >
            {makeMenuItems(rootPath)}
          </SubMenu>
          <Menu.Item key="8" icon={<FolderOutlined />}>
            <Link to={{ pathname: `${rootPath}/smbo` }}>СМБО</Link>
          </Menu.Item>
          <Menu.Item key="9" icon={<FolderOutlined />}>
            <Link to={{ pathname: `${rootPath}/lastData` }}>Последние данные</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/analysis">
                <Analysis idWell={idWell} />
              </Route>
              <Route path="/well/:idWell/stat">
                <WellStat idWell={idWell} />
              </Route>
              <Route path="/well/:idWell/wellAnalysis">
                <WellAnalysis 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/:idWell/smbo">
                <Smbo idWell={idWell} />
              </Route>
              <Route path="/well/:id/lastData">
                <LastData/>
              </Route>
              <Route path="/">
                <Redirect to={{ pathname: `${rootPath}/telemetry` }} />
              </Route>
            </Switch>
          </Content>
        </Layout>
      </Layout>
    </>
  );
}