为什么material-ui在Router中不起作用（来自react-router）答案

【问题标题】：why material-ui does not works inside Router (from react-router)为什么material-ui在Router中不起作用（来自react-router）
【发布时间】：2017-09-22 10:15:16
【问题描述】：

我尝试将 material-ui 与 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 ...

我做错了什么？

【问题讨论】：

你能告诉你如何发起getMuiTheme和lightBaseTheme。原因是您的 muiTheme 得到 undefined 而不是正确的主题对象。
import getMuiTheme from 'material-ui/styles/getMuiTheme'; import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme 在第一个示例中有效，在第二个示例中无效。

标签： react-router material-ui

【解决方案1】：

这是问题并正在解决。 Router 组件想看到他里面的 Route。我决定更改我的代码并且错误消失了。

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 组件。

【讨论】：