J'ai créé deux Switch différents à partir de react-router-dom. Un commutateur principal a toutes les routes principales avec MainTemplate et maintenant je veux ajouter différentes routes sans ce MainTemplate pour avoir une page vierge. Existe-t-il un moyen de le faire avec 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>
  );

Pour l'instant, lorsque je vais sur '/login, je vois le composant LoginPage et aussi MainTemplate, MenuSidebar and NextMeet components

1
Freestyle09 19 févr. 2020 à 22:09

1 réponse

Meilleure réponse

Dans ce cas, vous ne devriez avoir qu'un seul <Switch> sur cette page. Donc, puisque Login ne nécessite pas <MainTemplate>, cela devrait être déplacé dans un nouveau composant. Ensuite, créez un lien vers ce composant, c'est son propre <Route> (Aafter login) en tant que "attrape-tout" pour path="/".

Ensuite, dans votre nouvelle page que vous avez créée pour la page Main, vous pouvez utiliser les sous-routes que vous avez sur cette page.

Page mise à jour

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

Nouveau "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>
2
KiaiFighter 19 févr. 2020 à 19:15