how to render pages on dashboard in react using material Ui

user_16391648 0
Viewed 189

I am facing little bit difficulty, I have to manage my dashboard using material-UI with other components the process of application is that first I want to open login foam and then the dashboard and I am willing to change just the right-center part of the dashboard with the different component by selecting the listItem option

here is my Dashboard

enter image description here

here is all routes defined on my App.js

  <Provider store={store}>
    <BrowserRouter>
        < Routes>
          <Route exact path='/' element={<Login/>} />
          <Route exact path='/dashboard' element={<Dashboard/>} />
          <Route exact path='/product' element={<Product/>}/>
        </Routes>
      </BrowserRouter>
    </Provider>

currently, the issue is that when I am going to login which is on my "/" route and after the authentication the app navigate on the dashboard but when I click my product tab so the dashboard is disappear there

here is my product page

enter image description here

i am willing to that all pages should to render just in text area where text is showing

mern material-ui reactjs frontend javascript
1 Answers

I will make some assumptions before answering your question:

  • You want the Dashboard view to be always available
  • The Dashboard view's white screen should receive different content depending on the route that you're currently in

In your app you should have some sort of Layout which wraps the entire App. You are using react-router v6 so most probably the way to go it will be this:

  <Provider store={store}>
    <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route exact path='/login' element={<Login/>} />
            <Route exact path='/dashboard' element={<Dashboard/>} />
            <Route exact path='/product' element={<Product/>}/>
          </Route>
        </Routes>
      </BrowserRouter>
    </Provider>

And in your Layout component, something like this:

import { Outlet } from 'react-router-dom';

const Layout = () => (
  <main>
    <Outlet />
  </main>
);

You can check the react-router documentation for <Outlet />

Did it help?

EDIT: Forgot to say that yout <Layout /> view should have the Drawer that you're showing in your first screenshot, and the white space is where Outlet should be.

user_55203910
Related