如何在同一頁面上呈現儀表板組件

Question

我有儀表板組件，因為我有側面導航，它包含菜單項，這些菜單項是儀表板、管理公司、聯系我們、管理用戶。公司組件應僅在同一頁面上呈現，但如果我單擊管理公司鏈接，它會將我帶到新頁面並在那里管理公司組件。這是我的路線...

 /******.   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'
      },

請建議我在同一頁面上呈現這些組件的更好方法..提前致謝

Answer 1

您可以將 sidenav 包含在像 app.js 這樣的更高級別的組件中，而不是將它放在一個單獨的組件中，例如 Dashboard：

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