React Router 5 - 如何为没有标题和侧边导航栏的特定页面定义路由

Question

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:

Answer 1

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.

Answer 2

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>