React-两个不同的开关

Question

我从react-router-dom创建了两个不同的Switch。一个主交换机具有带有MainTemplate的所有主要路由，现在我要添加没有此MainTemplate的其他路由以具有空白页。有没有办法用React Router 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>
  );

现在进入'/login时，我看到LoginPage组件以及MainTemplate, MenuSidebar and NextMeet components

Answer 1

然后，在为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>
  );

新的[main-page.component.jsx

        <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>