Q:

Creating master component that all other components are read through so they inherit .container

"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.1.2",
"react-router-redux": "^5.0.0-alpha.9",

I have been working on a React project for quite sometime now and just now realized the app.js "master" component I have doesn't actually do anything at all. I was under the impression all of my other components were being read through it. (Once I made the realization, it was like, "Oh yeah, why would it?").
This kind of presents a problem to me: such things as .container and .container-fluid tags I will need to put in each component, or I will need to put them in the index.js. Both of these I would like to avoid: the former due to redundancy and the latter due to wanting to keep formatting out of the index.js.
So how can I refactor this such that components attached to these routes are sent through a "master" component so format tags such as these can be applied?
Here is my index.js and my app.js (that turns out isn't doing anything at all):
// 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';

// Render on every route
import App from './components/app';
import Navigation from './containers/global/navbar';
import Footer from './containers/global/footer';

// Route specific
import Signin from './containers/authentication/signin';
import Signout from './containers/authentication/signout';
import ResetPassword from './containers/authentication/reset_password';
import SetPassword from './containers/authentication/set_password';
import RecoverUsername from './containers/authentication/recover_username';
import NewAccount from './containers/authentication/new_account';
import SetupUser from './containers/authentication/setup_user';
import SecurityQuestions from './containers/authentication/security_questions';
import Home from './components/home';
import Help from './components/help';

// HoC to wrap protected routes in
import Timers from './helpers/timers';
import RequireAuth from './helpers/require_auth';

// Reducers 
import rootReducer from './reducers';

// Global app styles
import styles from '../assets/scss/app.scss';

// IE polyfill error fix
require('es6-promise').polyfill();
var axios = require('axios');

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 protectedRoute = compose(Timers, RequireAuth);

const store = createStore(rootReducer, initialState, composedEnhancers);

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <div>
                <Navigation />
                <App />
                <Switch>
                    <Route exact path='/home' component={protectedRoute(Home)} />
                    <Route exact path='/help' component={protectedRoute(Help)} />
                    <Route exact path='/auth/username' component={RecoverUsername} />
                    <Route exact path='/auth/new_account' component={NewAccount} />
                    <Route exact path='/auth/password' component={ResetPassword} />
                    <Route exact path='/auth/signout' component={Signout} />
                    <Route exact path='/auth/signin' component={Signin} />

                    <Route exact path='/auth/security_questions/f=:f&i=:id&k=:key' component={SecurityQuestions} />
                    <Route exact path='/auth/set_password/f=:f&i=:id&k=:key' component={SetPassword} />
                    <Route exact path='/auth/setup_user/f=:f&i=:id&k=:key' component={SetupUser} />
                    <Route exact path='/' component={Signin} />
                </Switch>
                <div id='gap'></div>
                <Footer />
            </div>
        </ConnectedRouter>
    </Provider>
    , document.querySelector('.app'));

// app.js
import React, { Component } from 'react';

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

A:

Ok, It was a pretty straight forward thing and pretty intuitive...
In index.js I just changed the <App /> to:
<App>
    <Switch>
    // all the routes...
    </Switch
</App>

Working as one would expect.

