页脚在导航栏和组件之间呈现，而不是在React-Redux中的组件之后

Question

正如标题所说，我的footer在navbar和组件之间呈现，而它应该在组件之后呈现。我可以使用CSS将footer置于底部，但在Chrome开发者控制台中，它仍会在页脚后面呈现该组件。

这就是app.js设置的方法。它使用react-router-dom进行客户端路由。 {this.props.children}根据路线呈现正确的组件：/home，/help等。

import React, { Component } from 'react';

import Navbar from '../containers/navbar';
import Footer from '../containers/footer';

export default class App extends Component {
    render() {
        return (
            <div>
                <Navbar />
                {this.props.children}
                <Footer />
            </div>
        );
    }
}

编辑：这是我在评论中根据建议最终做的事情：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { routerMiddleware, ConnectedRouter } from 'react-router-redux';

import createHistory from 'history/createBrowserHistory';

import App from './components/app';
import Navbar from './containers/navbar';
import Footer from './containers/footer';

import Signin from './containers/authentication/signin';
import Signout from './containers/authentication/signout';
import PasswordReset from './containers/authentication/password_reset';
import UsernameRecovery from './containers/authentication/username_recovery';
import Home from './components/home';
import Help from './components/help';

import RequireAuth from './helpers/require_auth';
import LeftSite from './helpers/left_site';

import rootReducer from './reducers';

import styles from '../assets/scss/main.scss';

const history = createHistory();

const initialState = {};
const enhancers = [];
const middleware = [thunk, routerMiddleware(history)];

if (process.env.NODE_ENV === 'development') {
    const devToolsExtension = window.devToolsExtension

    if (typeof devToolsExtension === 'function') {
        enhancers.push(devToolsExtension())
    }
}

const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
const store = createStore(rootReducer, initialState, composedEnhancers);

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <div>
                <Navbar />
                <App />
                <Switch>
                    <Route exact path='/home' component={LeftSite(RequireAuth(Home))} />
                    <Route exact path='/help' component={LeftSite(RequireAuth(Help))} />
                    <Route exact path='/auth/username' component={UsernameRecovery} />
                    <Route exact path='/auth/password' component={PasswordReset} />
                    <Route exact path='/auth/signout' component={Signout} />
                    <Route exact path='/auth/signin' component={Signin} />
                    <Route exact path='/' component={Signin} />
                </Switch>
                <Footer />
            </div>
        </ConnectedRouter>
    </Provider>
    , document.querySelector('.container'));

Answer 1

根据jonahe的建议，我最终将<Navbar />和<Footer />移出app.js文件，其中正在呈现各种组件。我将它们移动到我的路线所在的主index.js，最后得到了以下内容。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { routerMiddleware, ConnectedRouter } from 'react-router-redux';

import createHistory from 'history/createBrowserHistory';

import App from './components/app';
import Navbar from './containers/navbar';
import Footer from './containers/footer';

import Signin from './containers/authentication/signin';
import Signout from './containers/authentication/signout';
import PasswordReset from './containers/authentication/password_reset';
import UsernameRecovery from './containers/authentication/username_recovery';
import Home from './components/home';
import Help from './components/help';

import RequireAuth from './helpers/require_auth';
import LeftSite from './helpers/left_site';

import rootReducer from './reducers';

import styles from '../assets/scss/main.scss';

const history = createHistory();

const initialState = {};
const enhancers = [];
const middleware = [thunk, routerMiddleware(history)];

if (process.env.NODE_ENV === 'development') {
    const devToolsExtension = window.devToolsExtension

    if (typeof devToolsExtension === 'function') {
        enhancers.push(devToolsExtension())
    }
}

const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
const store = createStore(rootReducer, initialState, composedEnhancers);

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <div>
                <Navbar />
                <App />
                <Switch>
                    <Route exact path='/home' component={LeftSite(RequireAuth(Home))} />
                    <Route exact path='/help' component={LeftSite(RequireAuth(Help))} />
                    <Route exact path='/auth/username' component={UsernameRecovery} />
                    <Route exact path='/auth/password' component={PasswordReset} />
                    <Route exact path='/auth/signout' component={Signout} />
                    <Route exact path='/auth/signin' component={Signin} />
                    <Route exact path='/' component={Signin} />
                </Switch>
                <Footer />
            </div>
        </ConnectedRouter>
    </Provider>
    , document.querySelector('.container'));