javascript - React、Redux、React-Router - 卡在安装 material-ui 时

Question

教程:

但是由于我使用的是 redux 和 react 路由器，所以我无法真正将 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

我是这样做的。我有一个 index.js，我的 package.json 将其作为要启动的主文件(使用 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，在我的 container/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)

我正在使用 react flex 网格组件进行布局。

到目前为止这对我有用。希望它能帮助你。不要忘记 injectTapEventPlugin() 调用，因为我在 index.js 文件中有它。我还为我的应用导入了 .css 文件。