нормальные роуты

src/components/App/App.js

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import Start from './components/Start/Start';
-import Second from './components/Second/Second';
-import Tinder from './components/Tinder/Tinder';
-import Main from './components/Main/Main';
-import City from './components/City/City';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Start from '../Start/Start';
+import Second from '../Second/Second';
+import Tinder from '../Tinder/Tinder';
+import Main from '../Main/Main';
+import City from '../City/City';
 import axios from 'axios';
 import './App.css';
 
@@ -48,30 +49,17 @@ function App() {
     console.log(userData);
   }, [userData]);
 
-  let content = null;
-  switch (buttonValue) {
-    case '/second':
-      content = <Second getValue={handleButtonValue}setUserData={setUserData} />
-      break;
-    case '/tinder':
-      content = <Tinder getValue={handleButtonValue} cardInfo={cardInfo} userData={userData} setUserData={setUserData} />
-      break;
-    case '/main':
-      content = <Main />
-      break;
-    case '/city':
-      content = <City getValue={handleButtonValue} setUserData={setUserData} />
-      break;
-    default:
-      content = <Start getValue={handleButtonValue} userData={userData} setUserData={setUserData} />
-  }
-
-  const arrayLength = userData.unique ? userData.unique.length : 0;
 
   return (
-    <div className={`App ${isHidden ? 'hidden' : ''}`}>
-      {arrayLength !== 0 ? <Main userData={userData}/> : content}
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Start getValue={handleButtonValue} userData={userData} setUserData={setUserData} />}/>
+        <Route path="second" element={<Second getValue={handleButtonValue} setUserData={setUserData} />} />
+        <Route path="tinder" element={<Tinder getValue={handleButtonValue} cardInfo={cardInfo} userData={userData} setUserData={setUserData} />} />
+        <Route path="city" element={<City getValue={handleButtonValue} setUserData={setUserData} />} />
+        <Route path="main" element={<Main userData={userData}/>} />
+      </Routes>
+    </BrowserRouter>
   );
 }
 

src/components/City/City.js

@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom"; 
+
 import axios from "axios";
 import './City.css'
 
 const City = (props) => {
   const route = props.getValue;
   const setUserData = props.setUserData
+  const second = useNavigate();
 
   const [cityOptions, setCityOptions] = useState([]);
   const [filteredCityOptions, setFilteredCityOptions] = useState([]);
@@ -111,7 +114,7 @@ const City = (props) => {
     <button
       className="animated-button"
       onClick={() => {
-        route('/second')
+        second('/second')
         setUserData({selectedCity: selectedCity});
         console.log(selectedCity);
     }}

src/components/Second/Second.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { useNavigate } from "react-router-dom"; 
 import './style.css'
 import Icon from './images/Vector.svg'
 
@@ -6,7 +7,8 @@ import Icon from './images/Vector.svg'
 const Second = (props) => {
 
     const route = props.getValue;
-
+    const tinder = useNavigate();
+    const main = useNavigate();
     return (
         <div style={{
             display: 'flex',
@@ -41,8 +43,8 @@ const Second = (props) => {
                 gap:15,
                 alignItems:'center',
                }}>
-                  <button className="btn_first" onClick={() => route('/tinder')}>Давайте!</button>
-                  <button className="btn_second" onClick={() => route('/main')}>Пропустить</button>
+                  <button className="btn_first" onClick={() => tinder('/tinder')}>Давайте!</button>
+                  <button className="btn_second" onClick={() => main('/main')}>Пропустить</button>
                </div>
         </div>
     )

src/components/Start/Start.js

@@ -1,69 +1,74 @@
 import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom"; 
 
 const Start = (props) => {
+  const history = useNavigate();
+  const kek = './circle.html';
 
-    const route =  props.getValue;
-    const kek = './circle.html'
+  function hideAddressBar() {
+    if (document.documentElement.scrollHeight < window.outerHeight / window.devicePixelRatio)
+      document.documentElement.style.height = (window.outerHeight / window.devicePixelRatio) + 'px';
+    setTimeout(window.scrollTo(1, 1), 0);
+  }
 
-    function hideAddressBar(){
-        if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
-          document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
-        setTimeout(window.scrollTo(1,1),0);
-      }
-      window.addEventListener("load",function(){hideAddressBar();});
-      window.addEventListener("orientationchange",function(){hideAddressBar();});
+  window.addEventListener("load", function () { hideAddressBar(); });
+  window.addEventListener("orientationchange", function () { hideAddressBar(); });
 
-    useEffect(() => {
-        const handler = (ev: MessageEvent<{ type: string }>) => {
-          if (typeof ev.data !== 'object') return
-          if (!ev.data.type) return
-          if (ev.data.type !== 'button-click') return
-    
-          route('/city')
-        }
-    
-        window.addEventListener('message', handler)
-    
-        // Don't forget to remove addEventListener
-        return () => window.removeEventListener('message', handler)
-      }, [])
+  const handleButtonClick = () => {
+    history('/city');
+  };
 
-    return (
-        <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignContent: 'center',
-            alignItems: 'center',
-            flexWrap: 'wrap',
-            justifyContent: 'space-evenly',
-            height: '95vh',
-            overflow: 'hidden',
-        }}>
-            <div style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-            }}>
-                <img src="./logo192.png" alt="logo" style={{width: '181px', height: '181px'}} />
-            <span style={{
-                color: '#F68C43',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'start',
-                fontWeight: 700,
-                fontFamily: 'Raleway',
-                fontSize: '40px',
-            }}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
-            </div>
-            
-            <iframe scrolling="no" src={kek} style={{
-                overflow: 'hidden',
-                border: 'none',
-                width: '440px',
-                height: '440px',
-            }}></iframe>
-        </div>
-    ) 
+  useEffect(() => {
+    const frame = document.querySelector("#start");
+    frame.addEventListener('load', () => {
+      frame.contentWindow.addEventListener('click', () => {
+        handleButtonClick();
+      });
+    });
+
+    return () => {
+      frame.removeEventListener('load', () => {
+        frame.contentWindow.removeEventListener('click', () => {
+        });
+      });
+    };
+  }, []);
+
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignContent: 'center',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      justifyContent: 'space-evenly',
+      height: '95vh',
+      overflow: 'hidden',
+    }}>
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}>
+        <img src="./logo192.png" alt="logo" style={{ width: '181px', height: '181px' }} />
+        <span style={{
+          color: '#F68C43',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'start',
+          fontWeight: 700,
+          fontFamily: 'Raleway',
+          fontSize: '40px',
+        }}>Путешествия <p style={{ color: '#4EB0F2' }}>Просто!</p></span>
+      </div>
+      <iframe id="start" scrolling="no" src={kek} style={{
+        overflow: 'hidden',
+        border: 'none',
+        width: '440px',
+        height: '440px',
+      }}></iframe>
+    </div>
+  )
 };
 
-export default Start;
+export default Start;

src/components/Tinder/Tinder.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useNavigate } from "react-router-dom"; 
 import TinderCard from 'react-tinder-card';
 import './Tinder.css';
 
@@ -7,6 +8,7 @@ const Tinder = (props) => {
     const route = props.getValue;
     const cardInfo = props.cardInfo;
     const setUserData = props.setUserData;
+    const main = useNavigate();
 
     const [lastDirection, setLastDirection] = useState();
     const [cardId, setCardId] = useState([]);
@@ -51,7 +53,7 @@ const Tinder = (props) => {
                             var unique = [...new Set(cardId)]
                             var uniqueIds = [...new Set(allIds)];
                             if(uniqueIds.length === cardInfo.length) {
-                                route('/main');
+                                main('/main');
                                 setUserData(prevUserData => ({ ...prevUserData, unique: unique }));
                                 console.log(unique);
                                 console.log(props.userData);

src/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
-import * as serviceWorkerRegistration from './serviceWorkerRegistration';
-import reportWebVitals from './reportWebVitals';
+import App from './components/App/App';
+import * as serviceWorkerRegistration from './components/ServiceWorkerRegistration/serviceWorkerRegistration';
+import reportWebVitals from './components/ReportWebVitals/reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(