1

这是渲染方法：

const makeUniversalHTML = (req, res, preloadedState) => {
const App = require('../../client/App')
const store = configureStore(preloadedState)
const context = {}
const html = renderToString(
<App store={store} Router={StaticRouter} routerProps={{ location: 
req.url, context }} userAgent={req.headers['user-agent']} />)

const title = DocumentTitle.rewind()
let terminate = false

if (context.url) {
  res.redirect(302, context.url)
  terminate = true
 }

return { title, html, terminate }
}

这是我的应用程序组件

     import React from "react"
     import PropTypes from 'prop-types'
     import { Provider } from "react-redux"
     import { Route, Switch, Redirect } from "react-router-dom"
     import getMuiTheme from "material-ui/styles/getMuiTheme"
     import { DragDropContextProvider } from "react-dnd"
     import HTML5Backend from "react-dnd-html5-backend"
     // import { AppBar, Drawer, Paper } from 'material-ui'
    import { connect } from 'react-redux'

    // src
     import { getCurrentUser } from './utils'
     import styles from "./App.scss"
     import './styles/css/bootstrap.scss'

     // custom
     import './styles/css/layout.scss'
     import './styles/css/theme.scss'
     import './styles/css/ui.scss'
     import './styles/css/app.scss'
     import MUITheme from "../config/theme"

     import {PageLogin} from "./components"


      const mapStateToProps = (state, ownProps) => {
        const user = getCurrentUser(state)
        return { user }
       }
      @connect(mapStateToProps)
        export default class App extends React.Component {
        static propTypes = {
        userAgent: PropTypes.string,
        store: PropTypes.object,
      }

      static childContextTypes = {
       muiTheme: PropTypes.object
      }

      constructor(props) {
       super(props)
       }
      getChildContext() {
      const { userAgent } = this.props
      const theme = userAgent ? Object.assign({ userAgent }, MUITheme) : 
       MUITheme

       return {
         muiTheme: getMuiTheme(theme)
          }
        }
       render() {
        const { store, Router, routerProps } = this.props
        const paperStyle = {
          left: this.props.user ? 256 : 0,
           width: '100%',
          height: '100%',
         backgroundColor: '#F5F5F5',
        }

       return (
        <DragDropContextProvider backend={HTML5Backend}>
        <Provider store={store}>
          <Router {...routerProps}>
            <div>
              <Navigation />

                <Switch>

                  <PublicRoute path="/login" component={PageLogin} />

                </Switch>

            </div>
          </Router>
        </Provider>
      </DragDropContextProvider>
    )
  }
}

如果 unviersal 渲染为真，我会收到这些错误

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

第二个错误是

窗口未定义

我知道当通用渲染为真时，react 组件是从服务器端渲染的并且窗口对象不可用。但是你可以看到我没有在我的代码中使用窗口对象我仍然收到这个错误

4

0 回答 0