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

package-lock.json

@@ -18,6 +18,7 @@
         "matchmedia": "^0.1.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.15.0",
         "react-scripts": "5.0.1",
         "react-swipeable": "^7.0.1",
         "react-tinder-card": "^1.6.2",
@@ -34,8 +35,7 @@
         "workbox-routing": "^6.6.0",
         "workbox-strategies": "^6.6.0",
         "workbox-streams": "^6.6.0"
-      },
+      }
-      "devDependencies": {}
     },
     "node_modules/@aashutoshrathi/word-wrap": {
       "version": "1.2.6",
@@ -3409,6 +3409,14 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz",
+      "integrity": "sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -14924,6 +14932,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",
+      "integrity": "sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==",
+      "dependencies": {
+        "@remix-run/router": "1.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.15.0.tgz",
+      "integrity": "sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==",
+      "dependencies": {
+        "@remix-run/router": "1.8.0",
+        "react-router": "6.15.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -12,6 +12,7 @@
     "matchmedia": "^0.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "react-swipeable": "^7.0.1",
     "react-tinder-card": "^1.6.2",

src/components/App/App.js

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import Start from './components/Start/Start';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Second from './components/Second/Second';
+import Start from '../Start/Start';
-import Tinder from './components/Tinder/Tinder';
+import Second from '../Second/Second';
-import Main from './components/Main/Main';
+import Tinder from '../Tinder/Tinder';
-import City from './components/City/City';
+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' : ''}`}>
+    <BrowserRouter>
-      {arrayLength !== 0 ? <Main userData={userData}/> : content}
+      <Routes>
-    </div>
+        <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_first" onClick={() => tinder('/tinder')}>Давайте!</button>
-                  <button className="btn_second" onClick={() => route('/main')}>Пропустить</button>
+                  <button className="btn_second" onClick={() => main('/main')}>Пропустить</button>
                </div>
         </div>
     )

src/components/Start/Start.js

@@ -1,32 +1,38 @@
 import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom"; 
 
 const Start = (props) => {
-
+  const history = useNavigate();
-    const route =  props.getValue;
+  const kek = './circle.html';
-    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);
   }
+
   window.addEventListener("load", function () { hideAddressBar(); });
   window.addEventListener("orientationchange", function () { hideAddressBar(); });
 
+  const handleButtonClick = () => {
+    history('/city');
+  };
+
   useEffect(() => {
-        const handler = (ev: MessageEvent<{ type: string }>) => {
+    const frame = document.querySelector("#start");
-          if (typeof ev.data !== 'object') return
+    frame.addEventListener('load', () => {
-          if (!ev.data.type) return
+      frame.contentWindow.addEventListener('click', () => {
-          if (ev.data.type !== 'button-click') return
+        handleButtonClick();
+      });
+    });
 
-          route('/city')
+    return () => {
-        }
+      frame.removeEventListener('load', () => {
-    
+        frame.contentWindow.removeEventListener('click', () => {
-        window.addEventListener('message', handler)
+        });
-    
+      });
-        // Don't forget to remove addEventListener
+    };
-        return () => window.removeEventListener('message', handler)
+  }, []);
-      }, [])
 
   return (
     <div style={{
@@ -55,8 +61,7 @@ const Start = (props) => {
           fontSize: '40px',
         }}>Путешествия <p style={{ color: '#4EB0F2' }}>Просто!</p></span>
       </div>
-            
+      <iframe id="start" scrolling="no" src={kek} style={{
-            <iframe scrolling="no" src={kek} style={{
         overflow: 'hidden',
         border: 'none',
         width: '440px',

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 App from './components/App/App';
-import * as serviceWorkerRegistration from './serviceWorkerRegistration';
+import * as serviceWorkerRegistration from './components/ServiceWorkerRegistration/serviceWorkerRegistration';
-import reportWebVitals from './reportWebVitals';
+import reportWebVitals from './components/ReportWebVitals/reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(