CODEWITHSUNDEEP
reactjsreact-router
Senthil Sivaramakrishnan
Senthil Sivaramakrishnan

Reputation: 361

React Router 5 - How to define the route for specific page without header and side navigation bar

I am building a react application using react-router 5 and here is the screen flow in the attachment. I am quite confused to achieve the route as per the UI.

Basically, the application has 4 screen which starts with Login, gets into Student List(List of items), Student Info(Particular student info in limited) and Student Info(Particular student info in detailed)

- Login ('/') --> No header and side nav bar
 - Student List ('/students')--> Student Info('/student/01') - --> With header and side nav bar
 - Student Detailed Info ('/detail')- --> Without header and side nav bar(but not a modal window)

Screen Flow: enter image description here

Upvotes: 0

Views: 531

Answers (2)

Wraithy
Wraithy

Reputation: 2056

You can achieve it by structure of you routes...

<Route exact path="\">
 login screen
</Route>
<Route>
 <Header />
 <sidebar />
 <Switch>
  <Route path="students" />
  <Route path="info" />
  ...
 </Switch>
</Route>

Upvotes: 1

Jos&#233; Neto
Jos&#233; Neto

Reputation: 507

You can: 1 -

<Route path="students">
// Wrap the routes/pages with header and sidebar
</Route>
<Route path="detail">
// Wrap the routes/pages without header and sidebar
</Route>

2 - on header/sidebar components, detect the current route and skip these components rendering.

Upvotes: 0

Related Questions