Redux组件未接收儿童

Question

所以我正在开发一个React + Redux应用程序。

<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和Protected是无状态组件，即

const Home = (props) => <h2>Home</h2>;

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

所以，我不知道为什么会这样，但我认为这是因为Redux和ReactRouter之间的误用。

我的/登录完美渲染。但是，每当我转到另一个路由时，子组件都不会呈现，因为App.props.children在使用AppContainer时始终为null。但是，如果我改变路线路径＆＃34; /＆＃34;要使用App而不是AppContainer的组件，子项将成功呈现。

我做错了什么？