Redux Component not receiving children - reactjs

Question

So I am developing a React + Redux app.
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={AppContainer}>
<IndexRoute component={Home}/>
<Route path="login" component={LoginContainer}/>
<Route path="protected" component={Protected} onEnter={checkUserIsLoggedIn}/>
<Route path="*" component={NotFound}/>
</Route>
</Router>
</Provider>
AppContainer.jsx
const App = function(props){
var isAuthenticated = props.login.isAuthenticated;
return <Grid>
<h1>Welcome to app!</h1>
<nav>
{isAuthenticated ? <Link to="/logout">Logout</Link> : <Link to="/login">Login</Link> }|
<Link to="/">Home</Link> |
<Link to="/protected">Protected</Link> |
</nav>
<div>
{props.children}
</div>
</Grid>
};
const mapStateToProps = (state) => {
var loginState = state.login;
return {
login: {
apiToken: loginState.apiToken,
isAuthenticated: loginState.isAuthenticated
}
}
};
const AppContainer = connect(
mapStateToProps
)(App);
Home, NotFound and Protected are stateless components, i.e.
const Home = (props) => <h2>Home</h2>;
While Login.jsx
import React, { Component, PropTypes } from 'react'
import ReactDOM from 'react-dom'
import { Row, Col, Panel, Button, Alert, Form, FormGroup, FormControl, InputGroup, Glyphicon } from 'react-bootstrap'
class Login extends Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
this.activateSignup = this.activateSignup.bind(this);
}
onSubmit (e) {
e.preventDefault();
let username = ReactDOM.findDOMNode(this.refs.username).value;
let password = ReactDOM.findDOMNode(this.refs.password).value;
this.props.onLoginSubmit(username, password);
}
activateSignup (e){
alert('does nothing for now');
}
render () {
return (
<Col style={{marginTop: "50px"}} md={6} mdOffset={3} sm={8} smOffset={2}>
<Panel header="Sign In" bsStyle="info">
<Col sm={12}>
{this.props.apiToken && <Alert bsStyle="success">
<strong>Welcome!</strong>
</Alert>}
</Col>
<Form horizontal onSubmit={this.onSubmit}>
<InputGroup style={{marginBottom: "25px", paddingTop: "15px"}}>
<InputGroup.Addon><Glyphicon glyph="user"/></InputGroup.Addon>
<FormControl ref="username"
type="text"
placeholder="username or email"
required/>
</InputGroup>
<InputGroup style={{marginBottom: "25px"}}>
<InputGroup.Addon><Glyphicon glyph="lock"/></InputGroup.Addon>
<FormControl ref="password"
type="password"
placeholder="password"
required/>
</InputGroup>
<InputGroup>
<FormGroup>
<Col sm={12}>
<Button id="btn-login" bsStyle="success" type="submit" disabled={this.props.isFetching}>Login</Button>
</Col>
</FormGroup>
<FormGroup>
<Col md={12}>
<div style={{borderTop: "1px solid#888", paddingTop: "15px", "fontSize": "85%"}}>
Don't have an account!{' '}
<a href="#" onClick={this.activateSignup}>
Sign Up Here
</a>
</div>
</Col>
</FormGroup>
</InputGroup>
</Form>
</Panel>
</Col>
)
}
}
Login.propTypes = {
isFetching: PropTypes.bool,
error: PropTypes.string,
apiToken: PropTypes.string
};
export default Login;
LoginContainer.jsx
import { connect } from 'react-redux'
import { fetchLogin } from '../actions/login-actions'
import Login from '../views/Login.jsx'
const mapStateToProps = (state) => {
return state.login
};
const mapDispatchToProps = (dispatch) => {
return {
onLoginSubmit: (username, password) => {
dispatch(fetchLogin(username, password))
}
}
};
const LoginContainer = connect(
mapStateToProps,
mapDispatchToProps
)(Login);
export default LoginContainer
So, I don't know why this is happening but I think it is because of the misuse between Redux and ReactRouter.
My /login renders perfectly. However, whenever I go to another route, the children components are not rendered because App.props.children is always null when using AppContainer. However, if I change the route path "/" component to use App instead of AppContainer, children are rendered successfully.
What am I doing wrong?