React Routing an Dynamic Page content display-CodePudding

I am relatively new to reactJS and i am trying to build a dashboard with react. At the moment i have built out several authentication routes/pages but i am faced with a challenge with regards to routing/dynamic page content.

I want to have a situation where some components on the screen stay put while some other component changes. for instance, the first page is the login page. On this page i have just the form; email field, password field, and submit button same as the forgotten password page and reset password page. But when the user logs in i want to display the dashboard (And this is where i want dynamic component change).

on the dashboard I am looking to have the Appbar and Drawer stay put while the content in the middle change based on what the user selects, be it settings, cars, users etc which will all be Listitems on the Drawer.

At the moment i have my routing set up as this

<Router>
 <Routes>
  <Route path="/" element={<Login />} />
  <Route path="/reset/:id" element={<ResetPassword/>}/>
  <Route path="/forgotten-password" element={<ForgottenPassword/>}/>
  <Route path="/dashboard" element={<Dashboard/>}/>
 </Routes>
</Router>

I am using react-router-dom v6 by the way.

CodePudding user response：

If you want to keep the navbar and drawer always visible you have the place the component outside the routes.

So I'd define a component for the navbar and place it on the top like this before the Routes:

<Router>
{session && <Navbar />}
 <Routes>
  <Route path="/" element={<Login />} />
  <Route path="/reset/:id" element={<ResetPassword/>}/>
  <Route path="/forgotten-password" element={<ForgottenPassword/>}/>
  <Route path="/dashboard" element={<Dashboard/>}/>
 </Routes>
</Router>