如何将组件渲染到react-sidebar主内容视图

Question

[仪表盘] [1]

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom';
import Sidebar from "react-sidebar";
import Main from '../util/dashboard/Main';
import Users from './Users';
import Pages from './Pages';

const sideBarMenu = (
<div>
    <div>
        <NavLink to='/show' >
            <img src="assets/img/logo.png" alt="" width="140" />
        </NavLink><br />
        <p>ID 113350 </p>

        <div>
            <div>
                <p className="color-green o-sidebar-header">TRANSACTION</p><br />
                <ul className="o-nav-ul">
                    <NavLink to="/main"><li  className="color-white">Main</li><br /></NavLink>
                    <NavLink to="/users"><li className="color-white">Users</li></NavLink>
                    <NavLink to="Pages"><li className="color-white">Users</li></NavLink>
                </ul>
            </div><br />             
        </div>
    </div>
</div>

)

class Dashboard extends Component {
state = {
sidebarDocked: mql.matches,
sidebarOpen: false
}

render() {
return (
    <div>

        <Sidebar
            sidebar={sideBarMenu}
            open={this.state.sidebarOpen}
            docked={this.state.sidebarDocked}
            onSetOpen={this.onSetSidebarOpen}
            styles={{sidebar: { background:"#290c49"} content:{background:"#f5f5f5",marginTop:"5px"}}}> 

            <Main  />

        </Sidebar>
    </div>
        )
    }

}

我正在使用react-sidebar包。我一直试图找到如何在侧边栏菜单列表上的菜单上显示内容的不同组件（侧边栏菜单的右侧）。

目前，从代码示例中显示“菜单”组件。如何显示任何其他组件来代替“Main”组件。

]：Qazxswpoi

Answer 1

你需要这样的吗？

https://i.stack.imgur.com/G9GYv.png

当然，这并不意味着

render() {
  return (
    <div>
      <Sidebar
        sidebar={sideBarMenu}
        open={this.state.sidebarOpen}
        docked={this.state.sidebarDocked}
        onSetOpen={this.onSetSidebarOpen}
        styles={{sidebar: { background:"#290c49"} content:{background:"#f5f5f5",marginTop:"5px"}}}> 

        <Switch>
          <Route exact path='/' component={Main}/>
          <Route path='/about' component={About}/>
          <Route path='/contact' component={Contact}/>
        </Switch>

      </Sidebar>
    </div>
  )
}

在内容占位符中呈现。补充工具栏内容和主要内容呈现为兄弟姐妹 - 它们由父级连接。 <Sidebar/>隐藏了这种复杂性。