Reactjs 多个子路由，包括选项卡

我是React.js的新手。 我正在尝试使用Material UI构建一个复杂的应用程序，其中包含多个子路由和选项卡。

我创造了两个抽屉。 1.第一个作为使用默认物料界面抽屉的切换抽屉 2位于内容区内的第二个抽屉。 但问题在于，当屏幕与内容区域重叠时，内容会通过两个选项卡进行切换。 这就是代码

//**Drawer Code**
<ListItem button onClick={() => setComponent('keyrole')}>
                        <ListItemText disableTypography className={classes.SideBarFont} primary="Key info" />
                    </ListItem>

                    <ListItem button  onClick={() => setComponent('table')}>
                      <ListItemText disableTypography className={classes.SideBarFont}  primary="Persons of significant control" />
                    </ListItem>

                    <ListItem button>
                        <ListItemText disableTypography className={classes.SideBarFont}  primary="Beneficial ownership" />
                    </ListItem>

                    <ListItem component={Link} to="/inventory" button>
                      <ListItemText disableTypography className={classes.SideBarFont}  primary="Jurisdiction of operation" />
                    </ListItem>
**//content code**
 <div className={classes.content}>
          
          {
            component === 'keyrole' ?
                <NewCompanyInfo />
            :
            component === 'table' ?
                <Typography>
                   hello
                </Typography>          
              :
         {} 
             
          }
          </div>

//**抽屉代码**
setComponent（'keyrole'）}>
setComponent（'table'）}>
**//内容代码**
{
组件==='keyrole'？
:
组件=='表'？
你好
:
{} 
}

我该怎么做？ 谢谢