diff --git a/package-lock.json b/package-lock.json index c9d3ea5..5505414 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,6 +32,7 @@ "mini-css-extract-plugin": "^2.4.5", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-router-dom": "^6.3.0", "style-loader": "^3.3.1", "ts-loader": "^9.3.0", "typescript": "^4.6.4", @@ -5811,6 +5812,14 @@ "he": "bin/he" } }, + "node_modules/history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hpack.js": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", @@ -9840,6 +9849,30 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "dependencies": { + "history": "^5.2.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "dependencies": { + "history": "^5.2.0", + "react-router": "6.3.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -15973,6 +16006,14 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hpack.js": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", @@ -18845,6 +18886,23 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "requires": { + "history": "^5.2.0", + "react-router": "6.3.0" + } + }, "readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", diff --git a/package.json b/package.json index 1c5cdc4..e1d80a3 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "mini-css-extract-plugin": "^2.4.5", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-router-dom": "^6.3.0", "style-loader": "^3.3.1", "ts-loader": "^9.3.0", "typescript": "^4.6.4", diff --git a/src/App.css b/src/Home.css similarity index 95% rename from src/App.css rename to src/Home.css index 451dfa8..e0f3479 100644 --- a/src/App.css +++ b/src/Home.css @@ -1,4 +1,4 @@ -.App { +.Home { margin-bottom: 2.5rem; } @@ -16,4 +16,4 @@ a { a:hover { text-decoration: underline; -} \ No newline at end of file +} diff --git a/src/App.test.tsx b/src/Home.test.tsx similarity index 80% rename from src/App.test.tsx rename to src/Home.test.tsx index 2a68616..1e5d5a9 100644 --- a/src/App.test.tsx +++ b/src/Home.test.tsx @@ -1,6 +1,6 @@ -import React from 'react'; +import 'react'; import { render, screen } from '@testing-library/react'; -import App from './App'; +import App from './Home'; test('renders learn react link', () => { render(); diff --git a/src/App.tsx b/src/Home.tsx similarity index 73% rename from src/App.tsx rename to src/Home.tsx index 0560f9a..a2ea3e7 100644 --- a/src/App.tsx +++ b/src/Home.tsx @@ -2,12 +2,12 @@ import EthLogo from './components/EthLogo'; import Starter from './components/Starter'; import Projects from './components/Projects'; import Footer from './components/Footer'; -import './App.css'; +import './Home.css'; -function App() { +function Home() { return ( -
+
@@ -16,4 +16,4 @@ function App() { ); } -export default App; +export default Home; diff --git a/src/index.tsx b/src/index.tsx index 032464f..de3f74a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,16 +1,19 @@ -import React from 'react'; +import 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import App from './App'; +import Home from './Home'; +import { BrowserRouter, Routes, Route } from 'react-router-dom' import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( - - - + + + } /> + + ); // If you want to start measuring performance in your app, pass a function