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>

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

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

我相信这是因为包装器如何与Route组件道具一起作为HOC工作

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

结论

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