Где я могу разместить компонент MuiThemeProvider?

Question

Привет! В настоящее время я разрабатываю новое приложение React с использованием Material Ui для своего выбора библиотеки CSS. Я пытаюсь заставить его хорошо играть с реакции-роутером. Я не уверен, где я должен положить MuiThemeProvider. Пример docs оборачивает вокруг него основной компонент приложения.

Это прекрасно работает без каких-либо дополнительных компонентов от реакции-маршрутизатора. Но когда я хочу визуализировать остальные дочерние компоненты из реагирующего маршрутизатора, возникает ошибка.

index.js

  import React from "react";
  import ReactDOM from "react-dom";
  import injectTapEventPlugin from "react-tap-event-plugin";
  import routes from "./routes";
  import { Router, browserHistory} from "react-router";
  import "../public/css/index.css";
  import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";

  injectTapEventPlugin();

  ReactDOM.render(
       <MuiThemeProvider>
          <Router history={browserHistory} routes={routes} />
      </MuiThemeProvider>,
       document.getElementById("root")
  );

и App.js

import React, { Component } from "react";
import NavigationBar from "./NavigationBar";

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

export default App;

Брошенная ошибка заключается в следующем

warning.js:36Warning: React.createElement: тип недействителен - ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен. Проверьте метод визуализации WelcomePage,

а также

Uncaught Error: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен. Проверьте метод визуализации WelcomePage, в invariant (invariant.js:44) в instantiateReactComponent (instantiateReactComponent.js:77) в instantiateChild (ReactChildReconciler.js:44) в ReactChildReconciler.js:71 в traverseAllChildrenImplh2: перевернуть.jpg) в Object.instantiateChildren (ReactChildReconciler.js:70) по адресу ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:187) по адресу ReactDOMComponent.mountChildren (ReactMultiChild.jponponomDomComChateComChateComComChanceRomComComComComComComComComComComComComChC_C_W_C_D_C_W_C_C_C_C_C_C_C_W_C_C_C_C_C_C_C_C_C_C_C_C_CK) ()

Answer 1

Я обычно оборачиваю содержимое моего основного контейнера компонентом MuiThemeProvider.

Например, в моем маршрутизаторе (обратите внимание на AppContainer в качестве базового компонента):

<Router history={browserHistory}>
    <Route path="/" component={AppContainer}>
        <IndexRoute
            getComponent={(nextState, cb) => {
                System.import('./containers/home/home')
                    .then(loadRoute(cb))
                    .catch(errorLoading);
            }}
        />
    </Route>
</Router>

И в этом AppContainer у меня есть:

class AppContainer extends Component {
    render() {
        return (
            <MuiThemeProvider muiTheme={muiTheme}>
                <div className="content">
                    <h1>Here is my app</h1>
                    {this.props.children}
                </div>
            </MuiThemeProvider>
        );
    }
}