创建主要组件，读取所有其他组件，以便它们继承.container

Question

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

我一直在研究React项目已经有一段时间了，刚才我意识到app.js“master”组件实际上并没有做任何事情。我的印象是我的所有其他组件都是通过它阅读的。 （一旦我意识到，就像是，“哦，是的，为什么会这样？”）。

这种方式给我带来了一个问题：像.container和.container-fluid这样的东西我需要放在每个组件中，或者我需要把它们放在index.js中。这两个我想避免：前者由于冗余而后者由于想要保持格式化index.js。

那么如何重构这一点，使附加到这些路由的组件通过“主”组件发送，以便可以应用这些格式标签？

这是我的index.js和我的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';

// 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>
        )
    }
}

Answer 1

好的，这是一个非常直接的事情，非常直观......

在index.js我刚刚将<App />改为：

<App>
    <Switch>
    // all the routes...
    </Switch
</App>

按照预期的方式工作。