-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
dev: add nested routes in router-config
- Loading branch information
1 parent
f63952a
commit b866a73
Showing
20 changed files
with
94 additions
and
15 deletions.
There are no files selected for viewing
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -39,4 +39,4 @@ | |
|
||
.home-container a:hover { | ||
transform: translate(1px, 1px); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
</> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { Dashboard as default } from './Dashboard' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export const Income = () => { | ||
return <div>Income</div> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { Income as default } from './Income' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export const Reviews = () => { | ||
return <div>Reviews</div> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { Reviews as default } from './Reviews' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 } |
4 changes: 2 additions & 2 deletions
4
src/shared/components/Layout/Layout.jsx → ...red/layouts/HeaderLayout/HeaderLayout.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { HeaderLayout as default } from './HeaderLayout' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 /> | ||
</> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { HostLayout as default } from './HostLayout' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 } |