We Keep Coding

how to render pages on dashboard in react using material Ui

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
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
i am willing to that all pages should to render just in text area where text is showing

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.

Render multiple elements in React Router v6.+

I need the answer to this question: Render multiple components in React Router but for the newer version of react-router-dom (I'm using v6.0.2)
the older version of router-dom would work like this:
<Route path="/">
<Header/>
<Home/>
</Route>
while the new one looks like this:
<Route exact path="/" element={<Home/>}/>
I'm not sure how to add the Header as well

Try wrap them in a fragment
<Route exact path="/" element={<><Header/><Home/></>}/>

I ran in to the same issue, but also needed one page to get data from the parent element.
<Route path="/" element={<><Header/><Home children={<HomeDataProvider/>}/></>} />

try this if u want to add two or more component just put them inside of fragment tag
<Route exact path="/" element={<></>}/>

for Render multiple components in React Router for the newer version of react-router-dom (I'm using v6.5.0)
<Route path="/" element={
<>
< AddTodo addTodo={ addTodo }/>
<Todos todos={todos} onDelete={onDelete}/>
</>}>
</Route>

React router v4 - Browser router not rendering parent component

Currently I'm trying to make it so that my parent router is activated each time. I'm not very sure of the terminology here.
<BrowserRouter>
<Switch>
<Route exact path='/browserRouterPath' component={loginComponent}/>
<HashRouter>
<Route path='/hashRouterPath' component={loginComponent2}/>
<Route path='/' component={loggedInComponent}/>
</HashRouter>
</Switch>
</BrowserRouter>
LoggedInComponent
<Switch>
<Route exact path='/' render={() => (
<Redirect to: {{pathname: '/finalComponent'> }}/>
)}> />
...
</Switch>
My current problem is that my components in the hashRouter are not being called.
When the loggedInComponent redirects it to the new path, the hashRouter is not called.
However, if I remove the hashRouter in the first block of code. The hashRouter is called without incident, but that breaks the CSS/styling of the components in the program.
Is there a way to render the parent component each time? Or is there a workaround that eliminates the hashRouter but keeps the CSS for me?

React Router DOM is rendering 2 components

This is my router structure:
<Router>
<main className="py-3">
<Switch>
<Container>
<Route exact path="/admin" component={AdminScreen}></Route>
<Route path="/:campaignId" component={CampaignScreen}></Route>
<Route path="/" component={HomeScreen} exact></Route>
</Container>
</Switch>
</main>
</Router>
For "some" reason, when I go to /admin i also get the CampaignScreen rendered.
I added the <Switch> as you can see, but it does not seem to help.
Where lies the problem?

Since admin can theoretically also be a campaignId react router thinks it matches both routes, and you have the <Container> element directly inside the Switch it still renders both, the solution is to have your routes directly in the Switch

Is it possible to use MemoryRouter nested in BrowserRouter in React?

I have been searching, and trying for a while now, however I couldn't find an answer if it is possible to use MemoryRouter for only specific routes while I use BrowserRouter in general. I wan t to navigate to a certain component but not change the url, tried it like so, but it changes the url but not rendering the component, the complete opposite what I wish.
<BrowserRouter>
<Switch>
<Route path="/login" component={Login} exact />
<Route path="/" component={MainPage} />
<MemoryRouter>
<Route
path='/somecomponent'
component={SomeComponent}
/>
</MemoryRouter>
</Switch>
</BrowserRouter>

Routes inside the MemoryRouter are relative to the MemoryRouter, not to your current location as displayed in the URL bar.
As far as it's concerned, the current route is "/", and it will only render components at <Route path="/">. If you were to add
<Route path="/">
<Redirect to="/somecomponent" />
</Route>
directly under MemoryRouter it should go to the path you're looking for, and render as intended.