Question

这是渲染方法：

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

这是我的APP组件

     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呈现真实

，我会收到这些错误

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

，第二个错误是

窗口未定义

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

React Server端呈现（renderToString失败）：未定义窗口

0 个答案: