How to use layout components in react.js with react-router - node.js

Question

I am working on my first react application with redux and react-router( also using react-router-redux). I want a way to present two different layouts; one layout when the user has not signed in and another when the user has signed in.
Please I would like to know how to fix this in my code or how to achieve the expected result otherwise.
Below is what I have tried:
Created the root component App.js that reads the value from the state of the store to know if the user is logged in.
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
//Import Components
import Main from '../components/Main'
//Import necessary actions
import * as loginActions_ from '../actions/login'
const mapStateToProps = (state) => {
return {
loginStatus: state.loginStatus
}
}
const mapDispatchToProps = (dispatch) => {
const loginActions = bindActionCreators (loginActions_, dispatch)
return {
loginActions
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Main)
Created a presentation(Main.js) component that uses the loginStatus to render the appropriate layout.
import React, { Component } from 'react'
import { Container } from 'semantic-ui-react'
import MainLayoutOut from './MainLayoutOut'
import MainLayoutIn from './MainLayoutIn'
export default class Main extends Component {
constructor(props){
super(props)
}
render(){
const child = (this.props.loginStatus? <MainLayoutIn loginStatus={this.props.loginStatus} loginActions={this.props.loginActions} />
: <MainLayoutOut loginStatus={this.props.loginStatus} loginActions= {this.props.loginActions} /> )
return(
<Container>
{child}
</Container>
)
}
}
The MainLayoutOut.js which renders it's own Menu, Content(the children) and a footer.
import React, {Component} from 'react'
import {Container, Segment } from 'semantic-ui-react'
import Footer from './Footer'
import MenuOut from './MenuOut'
export default class MainLayoutOut extends Component {
constructor(props){
super(props)
}
render(){
return(
<Container fluid>
<MenuOut/>
<Segment key='contentOut'>
{React.cloneElement(this.props.children, this.props)}
</Segment>
<Footer/>
</Container>
)
}
}
Similarly, the MainLayoutIn.js has the structure below:
import React, {Component} from 'react'
import {Container, Segment, Header} from 'semantic-ui-react'
export default class MainLayoutIn extends Component {
constructor(props){
super(props)
}
render(){
return(
<Container>
<Segment key='menuIn'>Header In</Segment>
<Segment key='contentIn'>
<Header as='h1'>Content In</Header>
{/*this.props.children*/}
</Segment>
<Segment key='footerIn'>FooterIn</Segment>
</Container>
)
}
}
Below is how I created the store.
import { applyMiddleware, createStore } from 'redux'
import createLogger from 'redux-logger'
import ReduxThunk from 'redux-thunk'
import initialState from '../initialState'
import rootReducer from '../reducers'
const logger = createLogger()
const middlewares = [ReduxThunk, logger]
export default function configureStore(initialStateParam = initialState){
return createStore(rootReducer, {}, applyMiddleware(...middlewares));
}
The reducers the root-reducers; reducers/index.js
import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'
import loginStatus from './loginStatus'
const rootReducer = combineReducers({
routing: routerReducer,
loginStatus
})
export default rootReducer
and the loginStatus reducer for now is like:
export default function loginStatus(state = false, action){
console.log('Login Status fired!')
return state
}
Lastly the client.js file that sets up the application.
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { syncHistoryWithStore } from 'react-router-redux'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import configureStore from '../src/store/configureStore'
import App from '../src/containers/App'
import Main from '../src/components/Main'
import MainLayoutIn from '../src/components/MainLayoutIn'
import MainLayoutOut from '../src/components/MainLayoutOut'
import Blog from '../src/components/Blog'
import SignUp from '../src/components/SignUp'
import Login from '../src/components/Login'
const store = configureStore()
const history = syncHistoryWithStore(browserHistory, store)
const router = (
<Provider store={store}>
<Router history={history}>
<Route path='/' component={App}>
<Route path='/' component={Main}>
<Route path='/' component={MainLayoutOut}>
<IndexRoute component={Blog}></IndexRoute>
<Route path='/login' component={Login}/>
<Route path='/signup' component={SignUp}/>
</Route>
<Route path='/' component={MainLayoutIn}>
</Route>
</Route>
</Route>
</Router>
</Provider>
)
render( router ,document.getElementById('app'))
The client.js file is to route the components of the app. I want that when a user login he should land on a page(the purpose MainLayoutOut.js) having a menu (with menu-items to access a list of blogs, sign up, and login) a content and footer. But when the user authenticates and is authorized he is suppose to see completely different layout (the purpose of MainLayoutIn.js) with its own Menu, content, and footer.
Running the above code yields the error message:
Uncaught TypeError: Cannot read property 'props' of undefined
at Object.ReactElement.cloneElement (http://localhost:3000/bundle.js:6362:35)
at Object.cloneElement (http://localhost:3000/bundle.js:23625:49)
at MainLayoutOut.render (http://localhost:3000/bundle.js:17164:28)
at MainLayoutOut.tryRender (http://localhost:3000/bundle.js:3912:32)
at MainLayoutOut.proxiedMethod (http://localhost:3000/bundle.js:52020:31)
at http://localhost:3000/bundle.js:44855:22
at measureLifeCyclePerf (http://localhost:3000/bundle.js:44134:13)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:3000/bundle.js:44854:26)
at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:3000/bundle.js:44881:33)
at ReactCompositeComponentWrapper.performInitialMount (http://localhost:3000/bundle.js:44421:31)