时间戳

首页 > 解决方案 > 如何在同一页面上呈现仪表板组件

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

问题描述

我有仪表板组件，并且我有侧导航，它包含仪表板、管理公司、ContactUs、管理用户等菜单项。如果我单击仪表板，我需要在同一页面上呈现该仪表板组件，如果我单击管理公司然后管理公司组件应仅在同一页面上呈现，但如果我单击管理公司链接，它会将我带到新页面并在那里管理公司组件。这是我的路线...

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

请建议我在同一页面上呈现这些组件的更好方法..在此先感谢

标签： javascriptreactjs

解决方案

与其将 sidenav 放在像 Dashboard 这样的单独组件中，您可以将其包含在更高级别的组件中，例如 app.js，如下所示：

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

推荐阅读