feat: implemented react routing

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.24.1"
       },
       "devDependencies": {
         "@types/react": "^18.3.3",
@@ -1011,6 +1012,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.1.tgz",
+      "integrity": "sha512-mCOMec4BKd6BRGBZeSnGiIgwsbLGp3yhVqAD8H+PxiRNEHgDpZb8J1TnrSDlg97t0ySKMQJTHCWBCmBpSmkF6Q==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.18.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.1.tgz",
@@ -3057,6 +3066,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.1.tgz",
+      "integrity": "sha512-PTXFXGK2pyXpHzVo3rR9H7ip4lSPZZc0bHG5CARmj65fTT6qG7sTngmb6lcYu1gf3y/8KxORoy9yn59pGpCnpg==",
+      "dependencies": {
+        "@remix-run/router": "1.17.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.1.tgz",
+      "integrity": "sha512-U19KtXqooqw967Vw0Qcn5cOvrX5Ejo9ORmOtJMzYWtCT4/WOfFLIZGGsVLxcd9UkBO0mSTZtXqhZBsWlHr7+Sg==",
+      "dependencies": {
+        "@remix-run/router": "1.17.1",
+        "react-router": "6.24.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.24.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

src/App.tsx

@@ -1,7 +1,21 @@
+import { Route, Routes } from 'react-router-dom'
 import { Layout } from './layout'
+import { routes } from './routes'
 
 function App() {
-  return <Layout />
+  return (
+    <Routes>
+      <Route element={<Layout />}>
+        {routes.map((route, index) => (
+          <Route
+            key={route.path + index}
+            path={route.path}
+            element={route.element}
+          />
+        ))}
+      </Route>
+    </Routes>
+  )
 }
 
 export default App

src/layout/index.tsx

@@ -1,4 +1,4 @@
-import { HomePage } from '../pages/home'
+import { Outlet } from 'react-router-dom'
 import mainStyles from '../styles/main.module.scss'
 import { Footer } from './footer'
 import { Header } from './header'
@@ -7,7 +7,7 @@ export const Layout = () => {
   return (
     <div className={mainStyles.bodyMain}>
       <Header />
-      <HomePage />
+      <Outlet />
       <Footer />
     </div>
   )

src/main.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
 import App from './App.tsx'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
-  </React.StrictMode>,
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
 )

src/routes/index.tsx

@@ -0,0 +1,17 @@
+import { HomePage } from '../pages/home'
+
+export const appRoutes: Record<string, string> = {
+  index: '/',
+  home: '/home'
+}
+
+export const routes = [
+  {
+    path: appRoutes.index,
+    element: <HomePage />
+  },
+  {
+    path: appRoutes.home,
+    element: <HomePage />
+  }
+]