Router, link peldak

react_alap/mai/package-lock.json

@@ -12,6 +12,7 @@
         "cra-template": "1.2.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-router-dom": "^7.1.3",
         "react-scripts": "^5.0.1"
       }
     },
@@ -3526,6 +3527,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
     "node_modules/@types/eslint": {
       "version": "8.56.12",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
@@ -13719,6 +13725,52 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz",
+      "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz",
+      "integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==",
+      "dependencies": {
+        "react-router": "7.1.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -14620,6 +14672,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -15986,6 +16043,11 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "license": "0BSD"
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g=="
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

react_alap/mai/package.json

@@ -6,6 +6,7 @@
     "cra-template": "1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.3",
     "react-scripts": "^5.0.1"
   },
   "scripts": {

react_alap/mai/src/20250124/About.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+function About(){
+    return (
+        <>
+            ABOUT
+        </>
+    )
+}
+
+export default About;

react_alap/mai/src/20250124/Contact.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+function Contact(){
+    return (
+        <>
+            Contact
+        </>
+    )
+}
+
+export default Contact;

react_alap/mai/src/20250124/Home.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+function Home(){
+    return (
+        <>
+            <h1>Kezdőoldal</h1>
+            <Link to="about">Információkhoz link</Link>
+            <Link to="contact">Elérhetőség</Link>
+        </>
+    )
+}
+
+export default Home;

react_alap/mai/src/20250124/OSZTV/Fooldal.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+function Fooldal(){
+    return (
+        <>
+            <Link to="kaki">AZ OSZTV szar</Link>    
+            <Link to="urulek">AZ OSZTV ürülék</Link>
+        </>
+    )
+}
+
+export default Fooldal;

react_alap/mai/src/20250124/OSZTV/Kaki.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+function Kaki(){
+    return (
+        <>
+            <Link to="/">Vissza a főoldalra</Link>    
+            <Link to="./../urulek">AZ OSZTV ürülék</Link>
+        </>
+    )
+}
+
+export default Kaki;

react_alap/mai/src/20250124/OSZTV/Urulek.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+function Urulek(){
+    return (
+        <>
+            <Link to="/">Vissza a főoldalra</Link>    
+            <Link to="./../kaki">AZ OSZTV kaki</Link>
+        </>
+    )
+}
+
+export default Urulek;

react_alap/mai/src/App.js

@@ -1,3 +1,5 @@
+import {Routes, Route} from "react-router-dom";
+
 import logo from './logo.svg';
 import './App.css';
 import Auto from './Auto';
@@ -8,10 +10,23 @@ import Idozito from './Idozito';
 import ContextPelda from './ContextPelda';
 import UseRefPelda from './UseRefPelda';
 
+import Home from './20250124/Home';
+import Contact from './20250124/Contact';
+import About from './20250124/About';
+
+import Fooldal from "./20250124/OSZTV/Fooldal";
+import Kaki from "./20250124/OSZTV/Kaki";
+import Urulek from "./20250124/OSZTV/Urulek";
+
+
 function App() {
   return (
     <>
-      <UseRefPelda/>
+    <Routes>
+      <Route path="/" element={<Fooldal/>}></Route>
+      <Route path="kaki" element={<Kaki/>}/>
+      <Route path="urulek" element={<Urulek/>}/>
+    </Routes>
     </>
   );
 }

react_alap/mai/src/index.js

@@ -2,12 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import {BrowserRouter} from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>
+  </BrowserRouter>
 );
 
 // If you want to start measuring performance in your app, pass a function