Reaktion, Redux, Reaktion-Router - Stück Material-ui

Question

Tutorial zu installieren:

aber da ich redux bin mit und reagieren Router ich nicht wirklich MuiThemeProvider an die Spitze der Kette setzen können. Was ist der beste Weg, diese Bibliothek einzuschließen?

, dass meine ReactDOM.render Funktion ist:

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

Und das ist der Router:

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

ich es wie so getan haben. Ich habe eine index.js, die von meinem package.json als die Hauptdatei zum Starten bezeichnet wird (mit npm Start). Darin habe ich (einige Importe und solche aus Gründen der Kürze entfernt):

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

die auf einer anderen Datei Wurzel abhängt, gefunden in meinem Container/Root.jsx Datei:

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

Als nächstes ist die App , das mein anfängliches Layout meiner Anwendung enthält (in meinem Behälter/App.jsx Datei):

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) 

I die Flexgitterkomponente für das Layout reagieren verwenden.

Bis jetzt funktioniert das für mich. Hoffentlich hilft es dir. Vergessen Sie nicht den injectTapEventPlugin() Aufruf, wie ich ihn in meiner index.js Datei habe. Ich importiere auch die CSS-Dateien dort für meine App.

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