Window 未使用服务器端渲染 React 和 Express 定义

Question

请注意，我使用的是 Turbo360，您可以在 https://www.turbo360.co/ 找到更多相关信息，但我向您保证，它的工作原理与 express 完全一样，所以错误不是来自这里。

我已经和一些人谈过了，从我收集到的信息来看，这个错误来自我调用 cont initialState = window.INITIAL_STATE;.

的入口点

当我在服务器端访问后端路由时触发此错误。然而，路由本身在后端确实成功了，我的意思是，如果我要记录数据，我会让用户返回成功。

但是在前端我得到的是：

我会尽量不把它弄得乱七八糟，这样你就必须对 SSR 有一些很好的了解。 SSR 部分工作正常，直到我到达我的后端快速路线。所以我会保留这些代码，除非有必要添加它。

React 入口点：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';

import store from './stores';
import routes from './routes';

const initialState = window.INITIAL_STATE; //WHERE I BELIEVE ERROR IS COMMING FROM

ReactDOM.hydrate(
  <Provider store={store.configure(initialState)}>
    <BrowserRouter>
      <div>{renderRoutes(routes)}</div>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

服务器入口点：

require('babel-core/register')({
  presets: ['env', 'react', 'stage-0', 'stage-1']
});

const pkg_json = require('./package.json');
const vertex = require('vertex360')({ site_id: pkg_json.app });
var renderer = require('./renderer.js');

// initialize app
const app = vertex.app();

// import routes
const index = require('./routes/index');
const api = require('./routes/api');
const users = require('./routes/users');

// set routes
app.use('/api/users', users);

// hopefully will be used on every Route, this should handle SSR RR4
app.use(renderer);

module.exports = app;

服务器端用户注册路径：

router.post('/register', (req, res) => {
  const body = req.body;

  if (body.username.length == 0) {
    res.json({
      confirmation: 'fail',
      message: 'Please enter an username address.'
    });

    return;
  }

  if (body.password.length == 0) {
    res.json({
      confirmation: 'fail',
      message: 'Please enter a password.'
    });

    return;
  }

  turbo
    .createUser(body)
    .then(data => {
      res.json({
        confirmation: 'success',
        user: data
      });
    })
    .catch(err => {
      res.json({
        confirmation: 'fail',
        message: err.message
      });
    });
});

操作：

axios.post('/api/users/register', params)
  .then(response => { console.log(response.data });
  .catch(err => { console.log(err); });

Answer 1

查看代码，应该完成的第一个修复是

cont initialState = typeof window !== "undefined" && window && window.INITIAL_STATE;.

这应该可以理想地为您解决 window 未定义的问题。由于在执行 SSR 时，window 对象将不存在，因为它是浏览器级别的对象。

Answer 2

您可以使用 process.browser 排除应用中的错误。

见底部示例：

function Example() {
  const initialState =
    process.browser && window.INITIAL_STATE;

  return <div> { initialState } </div>
}

Window 未使用服务器端渲染 React 和 Express 定义

Window is not defined with Server Side Rendering React and Express

reactjs

redux

server-side-rendering

react-redux

react-router-dom