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 Files from "../pages/Files";
import Archive from "../pages/Archive";
import Messages from "../pages/Messages";
import Report from "../pages/Report";
import Analysis from "../pages/Analysis";
import WellAnalysis from "../pages/WellAnalysis";
import FluidService from "../components/Documents";
import Cementing from "../pages/Cementing";
import Nnb from "../pages/Nnb";
import Gti from "../pages/Gti";
import DocumentForWell from "../pages/DocumentForWell";
import Supervisor from "../pages/Supervisor";
import Master from "../pages/Master";
import LastData from '../pages/LastData'
import TelemetryView from "../pages/TelemetryView";

const { Content } = Layout

export default function Well() {
  let { id } = useParams()

  const {SubMenu} = Menu

  return (<>
    <Layout>
      <Menu
        mode="horizontal"
        selectable={true}
        className="well_menu"
      >
        <Menu.Item key="1" icon={<FundViewOutlined/>}>
          <Link to='telemetry'>Мониторинг</Link>
        </Menu.Item>
        <Menu.Item key="2" icon={<FolderOutlined/>}>
          <Link to='message'>Сообщения</Link>
        </Menu.Item>
        <Menu.Item key="3" icon={<FolderOutlined/>}>
          <Link to='report'>Рапорт</Link>
        </Menu.Item>
        <Menu.Item key="4" icon={<FolderOutlined/>}>
          <Link to='analysis'>Анализ</Link>
        </Menu.Item>
        <Menu.Item key="5" icon={<FolderOutlined/>}>
          <Link to='wellAnalysis'>Операции по скважине</Link>
        </Menu.Item>
        <Menu.Item key="6" icon={<FolderOutlined/>}>
          <Link to='file'>Файлы</Link>
        </Menu.Item>
        <Menu.Item key="7" icon={<FolderOutlined/>}>
          <Link to='archive'>Архив</Link>
        </Menu.Item>
        <SubMenu
            key="documentsSub"
            title={<Link to='fluidService' className="linkDocuments">Документы</Link>}
            icon={<FolderOutlined/>}
            selectable={true}
          >
            <Menu.Item key="documentsSub1" icon={<FolderOutlined/>}>
              <Link to='fluidService'>Растворный сервис</Link>
            </Menu.Item>
            <Menu.Item key="documentsSub1.1" icon={<FolderOutlined/>}>
              <Link to='cementing'>Цементирование</Link>
            </Menu.Item>
            <Menu.Item key="documentsSub1.2" icon={<FolderOutlined/>}>
              <Link to='nnb'>ННБ</Link>
            </Menu.Item>
            <Menu.Item key="documentsSub1.3" icon={<FolderOutlined/>}>
              <Link to='gti'>ГТИ</Link>
            </Menu.Item>
            <Menu.Item key="documentsSub1.4" icon={<FolderOutlined/>}>
              <Link to='documentsForWell'>Документы по скважине</Link>
            </Menu.Item>
            <Menu.Item key="documentsSub1.5" icon={<FolderOutlined/>}>
              <Link to='supervisor'>Супервайзер</Link>
            </Menu.Item>
            <Menu.Item key="documentsSub1.6" icon={<FolderOutlined/>}>
              <Link to='master'>Мастер</Link>
            </Menu.Item>
            <Menu.Item key="documentsSub1.7" icon={<FolderOutlined/>}>
              <Link to='lastData'>Последние данные</Link>
            </Menu.Item>
          </SubMenu>
      </Menu>

      <Layout>
        <Content className="site-layout-background">
          <Switch>
            <Route path="/well/:id/file">
              <Files/>
            </Route>
            <Route path="/well/:id/archive">
              <Archive/>
            </Route>
            <Route path="/well/:id/message">
              <Messages/>
            </Route>
            <Route path="/well/:id/report">
              <Report/>
            </Route>
            <Route path="/well/:id/analysis">
              <Analysis/>
            </Route>
            <Route path="/well/:id/wellAnalysis">
              <WellAnalysis/>
            </Route>
            <Route path="/well/:id/telemetry">
              <TelemetryView/>
            </Route>
            <Route path="/well/:id/fluidService">
              <FluidService selectedFileCategory={1}/>
            </Route>
            <Route path="/well/:id/cementing">
              <Cementing selectedFileCategory={2}/>
            </Route>
            <Route path="/well/:id/nnb">
              <Nnb selectedFileCategory={3}/>
            </Route>
            <Route path="/well/:id/gti">
              <Gti selectedFileCategory={4}/>
            </Route>
            <Route path="/well/:id/documentsForWell">
              <DocumentForWell selectedFileCategory={5}/>
            </Route>
            <Route path="/well/:id/supervisor">
              <Supervisor selectedFileCategory={6}/>
            </Route>
            <Route path="/well/:id/master">
              <Master selectedFileCategory={7}/>
            </Route>
            <Route path="/well/:id/lastData">
              <LastData/>
            </Route>
            <Route path="/well/:id/documents">
              <FluidService/>
            </Route>
            <Route path="/">
              <Redirect to={{pathname: `/well/${id}/telemetry`}}/>
            </Route>
          </Switch>
        </Content>
      </Layout>
    </Layout>
  </>)
}