1

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 v5 by the way.

jsninja
  • 23
  • 4
  • content in the webpage changes according to the the state updates in react, so whenever the state changes that part of the UI updates, read more about it here https://reactjs.org/docs/state-and-lifecycle.html – shiva addanki May 04 '22 at 12:55
  • @shivaaddanki your answer doesn't seem helpful, Im asking for the best way to achieve what i explained in the question – jsninja May 04 '22 at 12:59
  • You can use what are called [layout routes](https://reactrouter.com/docs/en/v6/getting-started/concepts#layout-routes) to render dynamic content. See marked duplicate for explanation and example. – Drew Reese May 04 '22 at 15:58

1 Answers1

0

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>
jcobo1
  • 1,065
  • 1
  • 18
  • 34
  • I put this into consideration but my problem is, I don't want the Navbar component visible in the login, forgotten password and reset password page. So that's my problem – jsninja May 04 '22 at 12:57
  • I understand that if the user is on login, forgotten password or reset password he has no session, right? In that case you only have to check if the user has session before showing the `Navbar` component. Check my last edit. – jcobo1 May 04 '22 at 13:00
  • I actually thought to do this but felt it was not the right way to go about it, thank you very much for your help. – jsninja May 04 '22 at 13:02