Javascript 如何在react router dom中使用不带路径道具的渲染方法来拆分具有不同路由的应用程序？

我使用的是react路由器dom中的组件，没有设置路径属性。我试图在中渲染匹配的路由组件，以便组件的最后一行是匹配的组件。并且它不是作为DOM中的同级节点添加的。我如何做到这一点？也许是使用儿童道具

const Dashboard = () => {
  return (
    <>
      <div>
        Dashboard
      </div>
    </>
  );
}
const Sidebar = (props) => {
  const classes = useStyles();
  const theme = useTheme();
  const history = useHistory();
  const [open, setOpen] = React.useState(false);

  const handleDrawerOpen = _ => {
    setOpen(true);
  };

  const handleDrawerClose = _ => {
    setOpen(false);
  };

  const toolbarHeaderText = _ => {
    const parts = window.location.href.split('/')
    if (parts[3] == 'dashboard'
      && parts[4] != 'map-generator'
      && parts[4] != 'settings') {
      return 'Dashboard'
    }
    if (parts[4] == 'map-generator') {
      return 'Map Generator'
    }
    if (parts[4] == 'settings') {
      return 'Account Settings'
    }
  }

  const TopMenu = _ => (<List>
    <ListItem button onClick={_ => history.push('/dashboard')}>
      <ListItemIcon>
        <IconDashboard />
      </ListItemIcon>
      <ListItemText primary={'Dashboard'} />
    </ListItem>
    <ListItem button onClick={_ => history.push('/dashboard/map-generator')}>
      <ListItemIcon>
        <IconMapGenerator />
      </ListItemIcon>
      <ListItemText primary={'Map Generator'} />
    </ListItem>
  </List>)

  const BottomMenu = _ => (<List>
    <ListItem button onClick={_ => history.push('/dashboard/settings')}>
      <ListItemIcon><IconSettings /></ListItemIcon>
      <ListItemText primary={'Account Settings'} />
    </ListItem>
  </List>)

  const NavMenu = _ => (<>
    <Divider />
    <TopMenu />
    <Divider />
    <BottomMenu />
  </>)

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar
        position="fixed"
        className={clsx(classes.appBar, {
          [classes.appBarShift]: open,
        })}
      >
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={handleDrawerOpen}
            edge="start"
            className={clsx(classes.menuButton, open && classes.hide)}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap>
            {
              toolbarHeaderText()
            }
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        className={classes.drawer}
        variant="persistent"
        anchor="left"
        open={open}
        classes={{
          paper: classes.drawerPaper,
        }}
      >
        <div className={classes.drawerHeader}>
          <IconButton onClick={handleDrawerClose}>
            {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
          </IconButton>
        </div>
        <NavMenu />
      </Drawer>
// Dashboard component rendered here
    </div>
  );
}

const RenderDashboard = <>
    <Sidebar
    />
    <Route
        exact
        path="/dashboard"
        component={Dashboard}
    />
    <Route
        exact
        path="/dashboard/map-generator"
        component={MapGenerator}
    />
    <Route
        exact
        path="/dashboard/settings"
        component={Settings}
    />
</>

const RenderLandingPage = <>
    <Route
        exact
        path="/"
        component={Home}
    />
    <Route
        path="/login"
        component={Login}
    />
    <Route
        path="/signup"
        component={SignUp}
    />
</>
ReactDOM.render(
    <Provider store={store}>
        <Router>
            <Switch>
                <Route
                    render={
                        _ => true ?
                            RenderDashboard
                            : RenderLandingPage
                    }
                />
            </Switch>
        </Router>
    </Provider>,
    document.querySelector('#root'));

const仪表板=（）=>{
返回(
仪表板
);
}
常量边栏=（道具）=>{
const classes=useStyles（）；
const theme=useTheme（）；
const history=useHistory（）；
const[open，setOpen]=React.useState（false）；
常量handleDrawerOpen=\u=>{
setOpen（真）；
};
常量handleDrawerClose=\u=>{
setOpen（假）；
};
常量toolbarHeaderText=\u=>{
const parts=window.location.href.split（“/”）
如果（部件[3]==“仪表板”
&&零件[4]！=“地图生成器”
&&零件[4]！=“设置”）{
返回“仪表板”
}
如果（部件[4]==‘映射生成器’）{
返回“映射生成器”
}
如果（部件[4]=“设置”）{
返回“帐户设置”
}
}
const TopMenu=\u=>(
history.push（'/dashboard'）}>
history.push（'/dashboard/map generator'）}>
)
const BottomMenu=>(
history.push（'/dashboard/settings'）}>
)
常量导航菜单==>(
)
返回(
{
工具栏标题文本（）
}
{theme.direction=='ltr'？：}
//此处呈现的仪表板组件
);
}
const RenderDashboard=
常量RenderLandingPage=
ReactDOM.render(
是吗？
渲染仪表板
：RenderLandingPage
}
/>
,
document.querySelector（'#root'）；