маршрутизация

src/Components/LoggedIn/Content/index.tsx

@@ -1,9 +1,18 @@
 import * as React from "react";
 import { Box } from "@mui/material";
+import Users from "./Users";
+import Promocode from "./Promocode";
+import Support from "./Support";
 import Tariffs from "./Tariffs";
 
 
-const Content: React.FC = () =>  {
+export interface MWProps {
+  section: number
+}
+
+const Content: React.FC<MWProps> = ({ section }) =>  {
+  const componentsArray = [ <Users />, <Promocode />, <Support />, <Tariffs /> ];
+
   return (
     <React.Fragment>
       <Box sx={{
@@ -16,7 +25,8 @@ const Content: React.FC = () =>  {
         overflowY: "auto",
         padding: "60px"
       }}>
-        <Tariffs />
+        
+        { componentsArray[ section ] }
       </Box>
     </React.Fragment>
   );

src/Components/LoggedIn/index.tsx

@@ -11,8 +11,11 @@ import theme from "../../theme";
 import { useMatch } from "react-router-dom";
 
 
-const LoggedIn: React.FC = () =>  {
+export interface MWProps {
+  section: number
+}
 
+const LoggedIn: React.FC<MWProps> = ({ section }) =>  {
   return (
     <React.Fragment>
       <ThemeProvider theme={theme}>
@@ -38,7 +41,7 @@ const LoggedIn: React.FC = () =>  {
                 alignItems: "center"
             }}>
               <Header />
-              <Content />
+              <Content section={ section } />
             </Box>
           </Box>
         </Box>

src/index.tsx

@@ -15,10 +15,14 @@ root.render(
             <Routes>
                 <Route path="/" element={ <Authorization /> } />
                 <Route path="/dispatch" element={ <Sections /> } />
-                <Route path="/users" element={ <LoggedIn /> } />
 
-                <Route path="/modalAdmin" element={ <LoggedIn /> } />
+                <Route path="/users"     element={ <LoggedIn section={0} /> } />
-                <Route path="/modalUser" element={ <LoggedIn /> } />
+                <Route path="/promocode" element={ <LoggedIn section={1} /> } />
+                <Route path="/support"   element={ <LoggedIn section={2} /> } />
+                <Route path="/tariffs"   element={ <LoggedIn section={3} /> } />
+
+                <Route path="/modalAdmin" element={ <LoggedIn section={-1} /> } />
+                <Route path="/modalUser" element={ <LoggedIn section={-1} /> } />
                 <Route
                     path="*"
                     element={ <Error404 /> }