Javascript 反应-两个不同的开关

我从

react router dom

创建了两个不同的交换机。一个主交换机具有所有带有MainTemplate的主路由，现在我想添加没有此MainTemplate的不同路由，使其具有空白页。有什么方法可以用React路由器Dom实现这一点吗

return (
    <Provider store={store}>
      <BrowserRouter>

        // Different page for login without MainTemplate UI
        <Switch>
          <Route strict exact path="/login" component={LoginPage} />
        </Switch>

        <MainTemplate>
          <MenuSidebar />
          <NextMeet />
          <Suspense
            fallback={
              <div style={{width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center'}}>
                <h1>Ładowanie...</h1>
              </div>
            }
          >
            // Main Switch for the rest of an app
            <Switch>
              <PrivateRoute exact path={routes.home} component={Home} />
              <PrivateRoute exact strict path={routes.timetable} component={Timetable} />
              <PrivateRoute exact strict path={routes.topicDatabase} component={TopicDatabase} />
              <PrivateRoute exact strict path={routes.history} component={History} />
              <PrivateRoute exact strict path={routes.account} component={Account} />
            </Switch>
          </Suspense>
        </MainTemplate>
      </BrowserRouter>
    </Provider>
  );

返回(
//不带MainTemplate UI登录的不同页面
//应用程序其余部分的主开关
);

---

现在，当我转到

”/login

时，我看到了LoginPage组件，以及

MainTemplate、MenuSidebar和NextMeet组件。在这种情况下，您应该在该页面上只有一个
。因此，由于
登录
不需要
，因此应该将其移动到新组件中。然后，链接到它自己的组件
（a在
登录
之后），作为
路径=“/”
的“一网打尽”

然后，在为
Main
页面创建的新页面中，可以使用该页面上的子例程

更新页面

  return (
    <Provider store={store}>
      <BrowserRouter>

        // Different page for login without MainTemplate UI
        <Switch>
          <Route strict exact path="/login" component={LoginPage} />
          <Route path="/" component={MainPage} />
        </Switch>


      </BrowserRouter>
    </Provider>
  );

我会制作一个组件，根据重定向时传递的道具在这两个登录页面之间切换（道具会告诉我们previos站点是否为MainTemplate）。你不需要两个开关。是的，我想知道我需要这样做。。。我在想，有一种更简单的方法可以做到这一点：）谢谢你的回答乐于帮助：）（如果它解决了你的问题，请接受答案：DYup我需要再等5分钟才能做到这一点：）
        <MainTemplate>
          <MenuSidebar />
          <NextMeet />
          <Suspense
            fallback={
              <div style={{width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center'}}>
                <h1>Ładowanie...</h1>
              </div>
            }
          >
            // Main Switch for the rest of an app
            <Switch>
              <PrivateRoute exact path={routes.home} component={Home} />
              <PrivateRoute exact strict path={routes.timetable} component={Timetable} />
              <PrivateRoute exact strict path={routes.topicDatabase} component={TopicDatabase} />
              <PrivateRoute exact strict path={routes.history} component={History} />
              <PrivateRoute exact strict path={routes.account} component={Account} />
            </Switch>
          </Suspense>
        </MainTemplate>