/src
|-- /components
| |-- /signin
| |-- SignIn.js
| |-- /home
| |-- Home.js
|
| |-- /dashboard
| |-- Dashboard.js
| |-- /assignee
|-- /App.js
|-- /index.js
As you can see i want to split into 2 parts(signin(adimin part), assignee(user part)).
I am using router for signin and assignee
Also i want to use router for home page, to display dashboard and other pages
How do i make it possible
///////////////////////////////////////////////////////////////
function App() {
return (
<Router>
<div className="maindiv">
<Routes>
<Route path="/" element={<SignIn />} />
<Route path="/assignment" element={<AssigneePage />} />
</Routes>
</div>
</Router>
);
}
///////////////////////////////////////////////////////////////
function Home() {
return (
<div>
<Container className="content">
<div className="side-nav">
<Nav />
</div>
<div className="main-content">
<Routes>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/review" element={<Review />} />
</Routes>
</div>
</Container>
</div>
);
}
//////////////////////////////////////////////////////////////////
Home is stacked inside Signup
When i try http://localhost:3000/dashboard it gives me this error
history.ts:501 No routes matched location “/dashboard”