React、Redux、React-Router - 卡在安装 material-ui
React, Redux, React-Router - Stuck at installing material-ui
教程:
然而,由于我使用的是 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>
);
ReactDOM.render(
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Provider store={store}>
<div>
{devTools}
<Router history={history} routes={getRoutes(actions.logout)}/>
</div>
</Provider>
</MuiThemeProvider>
,
document.getElementById('root')
);
我是这样做的。我有一个 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>
);
}
}
接下来是应用程序,其中包含我的应用程序初始布局(在我的 containers/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 文件。
教程:
然而,由于我使用的是 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>
);
ReactDOM.render(
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Provider store={store}>
<div>
{devTools}
<Router history={history} routes={getRoutes(actions.logout)}/>
</div>
</Provider>
</MuiThemeProvider>
,
document.getElementById('root')
);
我是这样做的。我有一个 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>
);
}
}
接下来是应用程序,其中包含我的应用程序初始布局(在我的 containers/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 文件。