爲什麼material-ui不能在Router內部工作（來自react-router）

我嘗試使用material-ui和react-router。這個例子效果很好：爲什麼material-ui不能在Router內部工作（來自react-router）

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被包木窗所有其他組件。

然後我嘗試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 ...

什麼，我做錯了什麼？

來源

2017-04-25 Bogdan Surai

你能告訴你如何啓動'getMuiTheme'和'lightBaseTheme'。原因是你的'muiTheme'獲取'undefined'而不是適當的主題對象。從 '材料的UI /風格/ getMuiTheme' –

'進口getMuiTheme;' '從「材料的UI /風格/ baseThemes進口lightBaseTheme/lightBaseTheme' 它工作在第一示例和不工作在第二示例。 –

這是問題和解決辦法。路由器組件希望看到他內部的路由。我決定改變我的代碼，錯誤消失了。

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，並用它來代替認證部件。

來源

2017-04-25 13:30:01

爲什麼material-ui不能在Router內部工作（來自react-router）

回答

相關問題