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 LastData from './LastData'
import { makeMenuItems } from "./Documents/menuItems";
import WellOperations from "./WellOperations";

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={`${rootPath}/telemetry`}>Мониторинг</Link>
          </Menu.Item>
          <Menu.Item key="2" icon={<AlertOutlined />}>
            <Link to={`${rootPath}/message`}>Сообщения</Link>
          </Menu.Item>
          <Menu.Item key="3" icon={<FilePdfOutlined />}>
            <Link to={`${rootPath}/report`}>Рапорт</Link>
          </Menu.Item>
          <Menu.Item key="5" icon={<FolderOutlined />}>
            <Link to={`${rootPath}/operations/plan`}>
              Операции по скважине
            </Link>
          </Menu.Item>
          <Menu.Item key="7" icon={<DatabaseOutlined/>}>
            <Link to={`${rootPath}/archive`}>Архив</Link>
          </Menu.Item>
          <SubMenu
            key="documentsSub"
            title={
              <Link
                to={`${rootPath}/document/fluidService` }
                className="linkDocuments">
                Документы
              </Link>
            }
            icon={<FolderOutlined />}
            selectable={true}
          >
            {makeMenuItems(rootPath)}
          </SubMenu>
          <Menu.Item key="9" icon={<FolderOutlined />}>
            <Link to={`${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/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/lastData">
                <LastData/>
              </Route>
              <Route path="/">
                <Redirect to={`${rootPath}/telemetry`} />
              </Route>
            </Switch>
          </Content>
        </Layout>
      </Layout>
    </>
  );
}