Reactjs 如何处理来自react路由器dom的多交换机

我的应用程序中有很多页面，其中一些页面有appbar，一些页面没有。因此，我使用了不止一个

开关

一个包装在MainContainer中，另一个没有任何appBar。但问题是，我包装的东西没有在屏幕上显示任何内容，我不知道为什么

这是我的密码

AuthLogin.jsx

render（）{
返回(
);
}

MainContainer.jsx

尝试将
从
authlogin.jsx
语句移动到它的外部–这样它就不是一个孩子没有得到它@MikeAbelnin
authlogin.jsx
交换包含
和
的行，以便主容器组件不是switch语句的孩子。目前，您正在通过组件层次结构将switch语句嵌套在另一个语句中，我认为这会导致冲突–每个
switch
语句只能获得一个匹配项，因此必须使它们相互独立
render() {
    return (
      <Switch>
        <Route exact path="/">
          <TempLogin />
        </Route>
        <Route
          exact
          path="/auth/:token"
          component={RoundLoadingWhileAuthenticating}
        />
        <MainContainer />
      </Switch>
    );
  }

<div
        className={clsx(classes.content, {
          [classes.contentShift]: open,
        })}
      >
        <Switch>
          <Route exact path="/dashboard" component={Dashboard} />   <-- this does not show anycontent
        
          <Route path="*" component={Error404Page} />
        </Switch>
      </div>