React Router v4 动态布局，无需重新渲染

Question

我正在尝试制作一个完全受登录页面保护的网站。用户登录后，他们将被重定向到主页面，该页面具有完全不同的布局。

MainLayout （包括标题、侧边栏等）

LoginLayout （将页面上的所有内容居中，但不包括上述元素）

FutureLayout （我希望以后能够对不同的页面使用不同的布局）

目前，我面临的最大问题是每次更改路线时，一切都会重新渲染。我有点理解为什么会发生这种情况，但我一直无法找到解决方法。

这是我目前的一些进展

---

第一个想法

https://codesandbox.io/s/6l10v4o7jn

const HomePage = () => (
  <MainLayout>
    <h1>HOME PAGE</h1>
  </MainLayout>
);

这显然是因为每次你移动到另一个页面，在不工作Page重新呈现Layout。您可以通过green在任一HomePage或AboutPage然后切换路线上切换按钮来查看此操作

---

第二个想法

https://codesandbox.io/s/moj437no58

  <Route render={() => (
      <MainLayout>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
      </MainLayout>
  )} />
  <Route render={() => (
    <LoginLayout>
      <Route path="/login" component={LoginPage} />
    </LoginLayout>
  )} />

这解决了状态问题，但当然它同时呈现两种布局，因为有注意告诉它不要，但正如预期的那样，页面仍然由路由器确定。

在实际应用中，这些线路将被抽取到像自己的分量<AuthRoutes>和<PublicRoutes>

---

为什么某些解决方案可能不起作用

我还计划使用connectedRouterRedirect来自redux-auth-wrapper来处理保护我的路由，这在使用我发现的一些建议时可能会出现问题。

我相信这是因为包装器如何作为 HOC 与Route的组件道具结合使用

IE <Route component={mustBeAuth(Page)} />

---

结论

我已经被这个问题困住了一段时间，我觉得我对各种技术和建议感到困惑。希望这里有人可以对此有新的看法，也许可以帮助我找出解决方案。