I'm trying to make a site that is fully protected behind a login page. Once the user has logged in, they are redirected to the main page, which has a completely different layout.
MainLayout (includes header, sidebar etc.)
LoginLayout (centers everything on the page, but doesn't include the above elements)
FutureLayout (I want to be able to use different layouts for different pages later)
At the moment, the biggest problem I'm facing is that every time I change my route, everything rerenders. I sort of understand why this is happening, but I've been unable to find a way around it.
Here is some of my current progress
First thought
https://codesandbox.io/s/6l10v4o7jn
const HomePage = () => (
<MainLayout>
<h1>HOME PAGE</h1>
</MainLayout>
);
This obviously doesn't work because every time you move to another page, the Pagererenders the Layout. You can see this in action by toggling the green button on either HomePage or AboutPage then switching routes
Second Thought
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>
)} />
This fixes the state problem, but of course it renders both layouts because there's noting telling it not to, but the page is still determined by the router, as expected.
In a real application, those routes would be extracted to their own component like <AuthRoutes> and <PublicRoutes>
Why some solutions might not work
I'm also planning on using connectedRouterRedirect from redux-auth-wrapper to deal with protecting my routes, which can be a problem when using some of the suggestions I've found.
This I believe is because how the wrapper works as a HOC in conjuntion with Route's component prop
i.e <Route component={mustBeAuth(Page)} />
Conclusion
I've been stuck with this for a while, and I feel like I'm getting confused with various techniques and suggestions. Hopefully someone here can have a fresh take on it and perhaps help me figure out a solution.