Hi guys, I am trying to use react-mounter as a layout manager, similar to @arunoda’s mantra example. But my MainLayout is rendering without the content component I am passing to it through FlowRouter. Any idea why that’s happening?
I figured it out, the content passed has to be rendered inside the layout which is why we need to pass a function. So the Layout component needs to be:
const MainLayout = ({content = () => null}) => (
<div className="MainLayout">
<header>
This is our header
</header>
<main>
{content()} <- Content has to be a function
</main>
<footer>
<p>Now you shall sleep!</p>
</footer>
</div>
);
export default MainLayout;
That’s the case when you want to use React contexts, as explained in the react-mounter docs. In your example you were calling mount passing a React class (defined by a stateless function: { content: () => (<Home />) }), but in your layout you were resolving it as an element ({content}). So another option might be calling mount with { content: <Home /> }. Not saying this is better! Just another option.