How to render dashboard components on same page

Question

I Have Dashboard Component and in that i have side nav it contains menu items those are Dashboard, Manage Companies, ContactUs, Manage Users .. If i click Dashboard i need to render that dashboard component on same page, if i click manage companies then manage companies component should render on same page only but if i click manage companies link it is taking me to new page and manage companies component rendeed there.Here is my routes...

 /******.   App.js.   ******/

   <GlobalProvider>
      <BrowserRouter>
       <Switch>
           {routes.map((route,index)=>(
           <Route key={index} path={route.path} 
            exact
            render={(props)=> <route.component {...props}/>}
             ></Route>
                ))}
               </Switch>
              </BrowserRouter>
               </GlobalProvider>


/**********. Routes.js **********/

   const routes=[
      {
        path:"/auth/register", component: RegisterComponent, title:'Register' 
       },
      {
        path:"/", component: LoginComponent, title:'Login' 
       },
      {
        path:"/auth/sidebar", component: SidebarNav, title:'SideBar'
      },
     {
       path:"/auth/forgotpassword", component: ForgotComponent, title:'ForgotPassword'
      },
     {
       path:"/auth/dashboard",  component:DashboardComponent, title:'DashboardComponent'
      },
     {
       path:"/auth/manage/companies", component:ManageCompaniesComponent, 
       title:'ManageCompaniesComponent'
       },
     {
        path:"/auth/contactus", component:ContactUsComponent, title:'ContactUsComponent'
      },

Please sugggest me better way to render those components on same page..Thanks in Advance

Answer 1

Instead of putting your sidenav in a separate component like Dashboard, you can include it in a higher level component like app.js something like this :

  <Switch>
       {routes.map((route,index)=>(
       <Route key={index} path={route.path} 
        exact
        render={(props)=> <route.component {...props}/>}
         ></Route>
        ))}
 </Switch>
<SideBar/>