React - 两个不同的 Switch

Posted 2023-02-21

【中文标题】React - 两个不同的 Switch

【英文标题】：React - two different Switch

【发布时间】：2020-06-04 01:12:07

【问题描述】：

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

【问题讨论】：

我会根据重定向时传递的道具制作一个组件来在这两个登录页面之间切换（道具会告诉你previos网站是否是MainTemplate）。而且你不需要两个开关。

【参考方案1】：

在这种情况下，您应该在此页面上只有一个<Switch>。因此，由于Login 不需要<MainTemplate>，因此应该将其移至新组件中。然后，链接到它自己的组件<Route>（在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>

【讨论】：

是的，我想知道我需要这样做...我在想有一种更简单的方法可以做到这一点:) 感谢您的回答

乐于助人 :) （如果它解决了您的问题，请接受答案：D

是的，我需要再等 5 分钟才能做到这一点 :)