material-uiがルータ内で動作しない理由（反応ルータから）

Question

react-routerでmaterial-uiを使用しようとしました。 その例はうまく機能：MuiThemeProviderは、他のすべてのコンポーネントをwrapingされていることを

import { Router, Route, IndexRoute, browserHistory } from 'react-router';  
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; 


render((
    <div> 

    **<MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>** 
     <Router history={browserHistory}> 
     <Route path="/" component={Authenticated}> 
      <IndexRoute component={Home} /> 
      <Route path="/home" component={Home} /> 
     </Route> 
     {accountRoutes()} 
     </Router> 
    **</MuiThemeProvider>** 
    </div> 
), document.getElementById('root')); 

注意してください。

私はMuiThemeProviderをルータの内部に移動しようとしました。そのような：

render((
    <div> 
    <Router history={browserHistory}> 
     **<MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>** 
     <Route path="/" component={Authenticated}> 
      <IndexRoute component={Home} /> 
      <Route path="/home" component={Home} /> 
     </Route> 
     {accountRoutes()} 
     **</MuiThemeProvider>** 
    </Router> 
    </div> 
), document.getElementById('root')); 

と私はエラー私が間違ってやっている何

warning.js:36 Warning: Failed context type: The context `muiTheme` is marked as required in `Paper`, but its value is `undefined`. 
in Paper (created by Accounts) 
in div (created by Accounts) 
in div (created by Flexbox) 
in Flexbox (created by Accounts) 
in Accounts (created by Authenticated) 
in Authenticated (created by RouterContext) 
in RouterContext (created by Router) 
in Router 
in div 

Uncaught TypeError: Cannot read property 'prepareStyles' of undefined 
at Paper.render (Paper.js:96) 
at ReactCompositeComponent.js:796 
at measureLifeCyclePerf (ReactCompositeComponent.js:75) 
at ... 

を持っていますか？

Answer 1

ここに問題があり解決しています。ルータコンポーネントは彼の中のルートを見たいと思う。私は自分のコードを変更することに決めました。エラーはなくなりました。

const AuthenticatedMui =() => { 
    return (
    <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}> 
     <Authenticated /> 
    </MuiThemeProvider> 
); 
}; 

render((
    <div> 
<Router history={browserHistory}> 
     <Route path="/" component={AuthenticatedMui }> 
      <IndexRoute component={Home} /> 
      <Route path="/home" component={Home} /> 
     </Route> 
     {accountRoutes()} 
     </Router> 
    </div> 
), document.getElementById('root')); 

AuthenticatedMuiを作成し、Authenticatedコンポーネントの代わりに使用しました。