Реагировать - два разных Switch

Question

Я создал два разных переключателя из react-router-dom. Один главный коммутатор имеет все основные маршруты с 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>
  );

На данный момент, когда я go до '/login я вижу компонент LoginPage, а также MainTemplate, MenuSidebar and NextMeet components

Answer 1

В этом случае у вас должен быть только один <Switch> на этой странице. Итак, поскольку Login не требует <MainTemplate>, его следует перенести в новый компонент. Затем, ссылка на этот компонент <Route> (Aafter login) как «поймать все» для path="/".

Затем, на своей новой странице, которую вы создали для страницы 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>