warum Material-ui funktioniert nicht innerhalb Router (von Reagieren-Router)

Question

Ich versuche, Material-Ui mit React-Router zu verwenden. Das Beispiel funktioniert gut:

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')); 

Beachten Sie, dass MuiThemeProvider alle anderen Komponenten wraping.

Dann versuchte ich MuiThemeProvider, um innerhalb des Routers zu bewegen. Wie folgt aus:

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')); 

und ich habe einen Fehler bekam

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 ... 

, was ich falsch mache?

Answer 1

Hier ist das Problem und die Lösung. Router-Komponente möchte Route in ihm sehen. Ich habe mich entschieden, meinen Code zu ändern und der Fehler ist weg.

Ich habe AuthenticatedMui erstellt und es anstelle der authentifizierten Komponente verwendet.