.

src/config/routes.tsx

@@ -1,12 +1,16 @@
 import { Routes, Route } from 'react-router-dom';
 import Layout from '../pages/Layout/Layout';
 import Main from '../pages/Main/Main';
+import Picture from '../pages/Picture/Picture';
+import Video from '../pages/Video/VideoPage';
 
 export default function AppRoutes(){
     return (
         <Routes>
             <Route path='/' element={<Layout />}>
                 <Route index element={<Main />} />
+                <Route path='picture' element={<Picture />} />
+                <Route path="video" element={<Video />} />
             </Route>
         </Routes>
     );

src/pages/Main/Main.tsx

@@ -1,10 +1,15 @@
 import styles from "./Main.module.css";
+import {useNavigate} from "react-router-dom";
 
 export default function Main() {
+  const navigate = useNavigate();
+
   return (
     <main className={styles.page}>
       <h1 className={styles.title}>Главная</h1>
       <p className={styles.text}>Базовая страница приложения готова.</p>
+      <button onClick={() => navigate('/picture')}>Go to Picture</button>
+      <button onClick={() => navigate('/video')}>Go to Video</button>
     </main>
   );
 }

src/pages/Picture/Picture.tsx

@@ -0,0 +1,8 @@
+
+export default function Picture() {
+    return (
+        <main>
+            <h1>Picture</h1>
+        </main>
+    );
+}

src/pages/Video/VideoPage.tsx

@@ -0,0 +1,6 @@
+
+export default function Video() {
+    return (
+        <div>video</div>
+    )
+}