asb_cloud_front/src/components/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 TelemetryView from "../pages/TelemetryView";

const { Content } = Layout

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

  return (<>
    <Layout>
      <Menu
        mode="horizontal"
        selectable={false}
        style={{height: '100%', borderRight: 0}}
      >
        <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='file'>Файлы</Link>
        </Menu.Item>
        <Menu.Item key="6" icon={<FolderOutlined/>}>
          <Link to='archive'>Архив</Link>
        </Menu.Item>
      </Menu>

      <Layout>
        <Content className="site-layout-background sheet">
          <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/telemetry">
              <TelemetryView/>
            </Route>
            <Route path="/">
              <Redirect to={{pathname: `/well/${id}/telemetry`}}/>
            </Route>
          </Switch>
        </Content>
      </Layout>
    </Layout>
  </>)
}