Skip to content

Commit

Permalink
dev: add nested routes in router-config
Browse files Browse the repository at this point in the history
  • Loading branch information
ivanbatchev committed Nov 12, 2024
1 parent f63952a commit b866a73
Showing 20 changed files with 94 additions and 15 deletions.
Empty file removed favicon.png
Empty file.
34 changes: 26 additions & 8 deletions src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,39 @@
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Home, About, Vans, VanDetails } from './pages'
import {
Home,
About,
Vans,
VanDetails,
Dashboard,
Income,
Reviews
} from './pages'
import { HeaderLayout, HostLayout } from './shared/layouts'
import './App.css'
import { Layout } from './shared/components'

const App = () => {
return (
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/vans' element={<Vans />} />
<Route path='/vans/:id' element={<VanDetails />} />
<Route path="/" element={<HeaderLayout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
{/* VANS related pages */}
<Route path="vans">
<Route index element={<Vans />} />
<Route path=":id" element={<VanDetails />} />
</Route>
{/* Host related pages */}
<Route path="host" element={<HostLayout />}>
<Route index element={<Dashboard />} />
<Route path="income" element={<Income />} />
<Route path="reviews" element={<Reviews />} />
</Route>
{/* ================================================= */}
</Route>
</Routes>
</BrowserRouter>
)
}

export default App
export default App
2 changes: 1 addition & 1 deletion src/pages/Home/styles.css
Original file line number Diff line number Diff line change
@@ -39,4 +39,4 @@

.home-container a:hover {
transform: translate(1px, 1px);
}
}
9 changes: 9 additions & 0 deletions src/pages/Host/Dashboard/Dashboard.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Outlet } from 'react-router-dom'

export const Dashboard = () => {
return (
<>
<div>Dashboard</div>
</>
)
}
1 change: 1 addition & 0 deletions src/pages/Host/Dashboard/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Dashboard as default } from './Dashboard'
3 changes: 3 additions & 0 deletions src/pages/Host/Income/Income.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const Income = () => {
return <div>Income</div>
}
1 change: 1 addition & 0 deletions src/pages/Host/Income/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Income as default } from './Income'
3 changes: 3 additions & 0 deletions src/pages/Host/Reviews/Reviews.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const Reviews = () => {
return <div>Reviews</div>
}
1 change: 1 addition & 0 deletions src/pages/Host/Reviews/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Reviews as default } from './Reviews'
5 changes: 5 additions & 0 deletions src/pages/Host/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import Reviews from './Reviews'
import Dashboard from './Dashboard'
import Income from './Income'

export { Reviews, Dashboard, Income }
3 changes: 2 additions & 1 deletion src/pages/index.js
Original file line number Diff line number Diff line change
@@ -2,5 +2,6 @@ import Home from './Home'
import About from './About'
import Vans from './Vans'
import VanDetails from './VanDetails'
import { Dashboard, Income, Reviews } from './Host'

export { Home, About, Vans, VanDetails }
export { Home, About, Vans, VanDetails, Dashboard, Income, Reviews }
3 changes: 2 additions & 1 deletion src/shared/components/Header/Header.jsx
Original file line number Diff line number Diff line change
@@ -8,8 +8,9 @@ export const Header = () => {
#VanLife
</Link>
<nav>
<Link to="/vans">Vans</Link>
<Link to="/host">Host</Link>
<Link to="/about">About</Link>
<Link to="/vans">Vans</Link>
</nav>
</header>
)
1 change: 0 additions & 1 deletion src/shared/components/Layout/index.js

This file was deleted.

2 changes: 1 addition & 1 deletion src/shared/components/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Header from './Header'
import Loader from './Loader'
import VanCard from './VanCard'
import Layout from './Layout'
import Layout from '../layouts/HeaderLayout'

export { Header, Loader, VanCard, Layout }
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Outlet } from 'react-router-dom'
import Header from '../Header'
import Header from '../../components/Header'

export const Layout = () => {
export const HeaderLayout = () => {
return (
<>
<Header />
1 change: 1 addition & 0 deletions src/shared/layouts/HeaderLayout/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { HeaderLayout as default } from './HeaderLayout'
15 changes: 15 additions & 0 deletions src/shared/layouts/HostLayout/HostLayout.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Link, Outlet } from 'react-router-dom'
import './styles.css'

export const HostLayout = () => {
return (
<>
<nav className="host-nav">
<Link to="/host">Dashboard</Link>
<Link to="/host/income">Income</Link>
<Link to="/host/reviews">Reviews</Link>
</nav>
<Outlet />
</>
)
}
1 change: 1 addition & 0 deletions src/shared/layouts/HostLayout/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { HostLayout as default } from './HostLayout'
16 changes: 16 additions & 0 deletions src/shared/layouts/HostLayout/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.host-nav {
display: flex;
}

.host-nav a {
text-decoration: none;
color: #4D4D4D;
font-weight: 500;
padding: 5px 20px;
}

.host-nav a:hover {
color: #161616;
text-decoration: underline;
font-weight: 600;
}
4 changes: 4 additions & 0 deletions src/shared/layouts/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import HeaderLayout from './HeaderLayout'
import HostLayout from './HostLayout'

export { HeaderLayout, HostLayout }

0 comments on commit b866a73

Please sign in to comment.