如何在同一页面上呈现仪表板组件

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/>