反应，终极版，阵营 - 路由器 - 在安装材料的UI

Question

教程卡住：

但是，由于我使用的终极版和反应路由器我真的不能把MuiThemeProvider到链的顶端。包含这个库的最佳方式是什么？

这是我ReactDOM.render功能：

ReactDOM.render(
    <Provider store={store}> 
    <div> 
     {devTools} 
     <Router history={history} routes={getRoutes(actions.logout)}/> 
    </div> 
    </Provider>, 
    document.getElementById('root') 
); 

这就是今天的路由器：

export default (onLogout) => (
    <Route path="/" name="app" component={App}> 
    <IndexRoute component={SimpleListComponent}/> 
    <Route path="register" component={RegisterPage}/> 
    <Route path="private" component={privateRoute(PrivatePage)}/> 
    <Route path="login" component={LoginPage}/> 
    <Route path="logout" onEnter={onLogout}/> 
    </Route> 
); 

Answer 1

我都做到了，像这样。我有一个由我的package.json引用的index.js作为开始的主文件（使用npm start）。在这里面我有（去掉了一些简洁和进口等）：

import './stylesheets/fonts.css'; 
import './stylesheets/main.css'; 

injectTapEventPlugin(); 

// custom MuiTheme overriding the getMuiTheme() values 
const muiTheme = getMuiTheme({ 
    palette: { 
    textColor: cyan500, 
    }, 
    appBar: { 
    color: grey300, 
    textColor: cyan500, 
    height: 50 
    }, 
}); 

const Index =() => (
    <MuiThemeProvider muiTheme={muiTheme}> 
    <Root /> 
    </MuiThemeProvider> 
) 

render(
    <Index />, 
    document.getElementById('app') 
); 

依赖于其他文件的根，我的容器中找到/ Root.jsx文件：

const store = configureStore(); 

// Create an enhanced history that syncs navigation events with the store 
const history = syncHistoryWithStore(browserHistory, store); 

let onUpdate =() => {window.scrollTo(0, 0); }; 

export default class Root extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <div> 
      <Router history={history} onUpdate={onUpdate}> 
      <Route path="/" component={App}> 
       <IndexRoute component={Home}/> 
       <Route path="home" component={Home}/> 
       <Redirect path="*" to="/" /> 
      </Route> 
      </Router> 
      <DevTools/> 
     </div> 
     </Provider> 
    ); 
    } 
} 

接下来是应用程序，它包含我的我的应用程序的初始布局（在我的容器/ App.jsx文件）：

export default class App extends Component { 
    constructor(props, context) { 
    super(props, context); 
    } 

    static propTypes = { 
    children: PropTypes.node 
    } 

    render() { 
    return (
     <Grid fluid> 
     <Row> 
      <Col> 
      <Header active={this.props.active} /> 
      </Col> 
     </Row> 
     <Row> 
      <Col> 
      {this.props.children} 
      </Col> 
     </Row> 
     <Row> 
      <Col> 
      <Footer/> 
      </Col> 
     </Row> 
     </Grid> 
    ); 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    return { 
    active: ownProps.history.isActive 
    }; 
}; 

export default connect(mapStateToProps)(App) 

我使用的反应柔性网格部件布局。

到目前为止，这对我很有用。希望它可以帮助你。不要忘记injectTapEventPlugin（）调用，因为我在我的index.js文件中有它。我也为我的应用程序导入.css文件。

Answer 2

ReactDOM.render(
    <MuiThemeProvider muiTheme={getMuiTheme()}> 
    <Provider store={store}> 
    <div> 
     {devTools} 
     <Router history={history} routes={getRoutes(actions.logout)}/> 
    </div> 
    </Provider> 
    </MuiThemeProvider> 
, 
    document.getElementById('root') 
);