为什么 material-ui 在路由器内部不起作用（来自 react-router）

Question

我尝试将 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 移动到 Router 内部。像那样：

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

这是问题和解决方案。 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 组件。

为什么 material-ui 在路由器内部不起作用（来自 react-router）

why material-ui does not works inside Router (from react-router)

react-router

material-ui