我已经按照在同构环境中设置 Material ui 的所有指南进行操作，但我的页面仍然是白色的，文本上没有显示设计。我正在使用 Universal-react-redux-starter-kit。
在 Firefox 中，我在控制台中找到了这个
未知属性'mui-prepared'。声明被放弃。localhost:3000 未知属性'mui-prepared'。声明被放弃。localhost:3000 未知属性'mui-prepared'。声明被放弃。
在 Chrome 中我得到了这个
Uncaught (in promise) TypeError: Request scheme 'chrome-extension' is unsupported at 80235ae9f69d4d5feb32.serviceworker.js:sourcemap:618 at
我的页面看起来像这样
几天来，我一直无法弄清楚这个问题。
//AppContainer.js
...
render () {
const { layout, history, routes, routerKey, store, userAgent } = this.props
const muiTheme = getMuiTheme({
palette: {
primary1Color: green500,
primary2Color: green700,
primary3Color: green100,
},
}, {
avatar: {
borderColor: null,
},
userAgent: userAgent,
});
return (
<MuiThemeProvider muiTheme={muiTheme}>
<Provider store={store}>
<div style={{ height: '100%' }}>
<Helmet {...Object.assign(clone(defaultLayout), layout)} />
<Router history={history} children={routes} key={routerKey} />
</div>
</Provider>
</MuiThemeProvider>
)
}
...
client.js 示例
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
// ========================================================
// Browser History Setup
// ========================================================
const browserHistory = useRouterHistory(createBrowserHistory)({
basename: __BASENAME__
})
// ========================================================
// Store and History Instantiation
// ========================================================
// Create redux store and sync with react-router-redux. We have installed
the
// react-router-redux reducer under the routerKey "router" in
src/routes/index.js,
// so we need to provide a custom `selectLocationState` to inform
// react-router-redux of its location.
const initialState = window.___INITIAL_STATE__
const store = createStore(initialState, browserHistory)
const history = syncHistoryWithStore(browserHistory, store, {
selectLocationState: (state) => state.router
})
// ========================================================
// Developer Tools Setup
// ========================================================
if (0 && __DEBUG__) {
if (window.devToolsExtension) {
window.devToolsExtension.open()
}
}
// ========================================================
// Render Setup
// ========================================================
const MOUNT_NODE = document.getElementById('root')
let render = (routerKey = null) => {
const routes = require('./routes/index').default(store)
match({ history, routes }, (error, redirectLocation, renderProps) => {
// todo: Error handling should be improved
if (error) {
console.log(error)
return
}
Resolver.render(
() => <AppContainer
{...renderProps}
store={store}
history={history}
routes={routes}
routerKey={routerKey}
userAgent={global.navigator.userAgent}
layout={{...layout, ...(window.___LAYOUT__ || {})}}
/>,
MOUNT_NODE
)
})
}