feat: implemented react routing
This commit is contained in:
parent
9e686b2466
commit
b63d620d0f
41
package-lock.json
generated
41
package-lock.json
generated
@ -9,7 +9,8 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1"
|
"react-dom": "^18.3.1",
|
||||||
|
"react-router-dom": "^6.24.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/react": "^18.3.3",
|
"@types/react": "^18.3.3",
|
||||||
@ -1011,6 +1012,14 @@
|
|||||||
"node": ">= 8"
|
"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": {
|
"node_modules/@rollup/rollup-android-arm-eabi": {
|
||||||
"version": "4.18.1",
|
"version": "4.18.1",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.1.tgz",
|
"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": ">=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": {
|
"node_modules/readdirp": {
|
||||||
"version": "3.6.0",
|
"version": "3.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||||
|
@ -11,7 +11,8 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1"
|
"react-dom": "^18.3.1",
|
||||||
|
"react-router-dom": "^6.24.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/react": "^18.3.3",
|
"@types/react": "^18.3.3",
|
||||||
|
16
src/App.tsx
16
src/App.tsx
@ -1,7 +1,21 @@
|
|||||||
|
import { Route, Routes } from 'react-router-dom'
|
||||||
import { Layout } from './layout'
|
import { Layout } from './layout'
|
||||||
|
import { routes } from './routes'
|
||||||
|
|
||||||
function App() {
|
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
|
export default App
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { HomePage } from '../pages/home'
|
import { Outlet } from 'react-router-dom'
|
||||||
import mainStyles from '../styles/main.module.scss'
|
import mainStyles from '../styles/main.module.scss'
|
||||||
import { Footer } from './footer'
|
import { Footer } from './footer'
|
||||||
import { Header } from './header'
|
import { Header } from './header'
|
||||||
@ -7,7 +7,7 @@ export const Layout = () => {
|
|||||||
return (
|
return (
|
||||||
<div className={mainStyles.bodyMain}>
|
<div className={mainStyles.bodyMain}>
|
||||||
<Header />
|
<Header />
|
||||||
<HomePage />
|
<Outlet />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -1,10 +1,13 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import ReactDOM from 'react-dom/client'
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import { BrowserRouter } from 'react-router-dom'
|
||||||
import App from './App.tsx'
|
import App from './App.tsx'
|
||||||
import './index.css'
|
import './index.css'
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
|
<BrowserRouter>
|
||||||
<App />
|
<App />
|
||||||
</React.StrictMode>,
|
</BrowserRouter>
|
||||||
|
</React.StrictMode>
|
||||||
)
|
)
|
||||||
|
17
src/routes/index.tsx
Normal file
17
src/routes/index.tsx
Normal file
@ -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 />
|
||||||
|
}
|
||||||
|
]
|
Loading…
Reference in New Issue
Block a user