如何仅渲染页眉、页脚、菜单一次且仅用于使用 react js 的私有路由？

Leo Bruno 发表于 Dev

里奥·布鲁诺

我需要满足这两个条件，但每次我处理一个，我总是违反另一个。

我有 3 个组件（页眉、菜单、页脚），它们只需要为私有路由组件渲染一次。

它们是类组件，它们的状态会在用户登录时接收从本地存储中检索到的一些数据。

如果我将它们放在 app 组件中，在路由组件周围，我会满足“渲染一次”的要求，但是当非私有路由传递给路由组件时，它们会被渲染。

如果我将它们放置在路由组件中，在私有路由周围，我满足了后者的要求，但是每次渲染私有路由组件时都会重新渲染它们。

我怎样才能满足这两个要求？

提前致谢。

德鲁里斯

您可以将页眉、菜单和页脚组件渲染到与您的私有路由相同路径的路由中。一定要做到这一点之内的Router，但外面的任何Switch部件。在Router 包括性比赛和呈现的路线（即所有比赛），而Switch 完全匹配，并呈现路线（即仅在第一场比赛）。

例子：

<Router>
  <Route
    path={["/private/path/1", "/private/path/2", ....]}
    component={Header}
  />
  <Route
    path={["/private/path/1", "/private/path/2", ....]}
    component={Menu}
  />
  <Switch>
    ... all regular and private routes
  </Switch>
  <Route
    path={["/private/path/1", "/private/path/2", ....]}
    component={Footer}
  />
</Router>

您可以通过在数组中定义您的私有路由来减少/增加 DRY。

const privateRoutes = ["/private/path/1", "/private/path/2", ....];

...

<Router>
  <Route
    path={privateRoutes}
    component={Header}
  />
  <Route
    path={privateRoutes}
    component={Menu}
  />
  <Switch>
    ... all regular and private routes
  </Switch>
  <Route
    path={privateRoutes}
    component={Footer}
  />
</Router>