2

我正在使用 react-router 版本 4 并尝试处理服务器上的路由。

所有教程，包括ReactTraining repo 上的官方服务器渲染指南和React Router 教程 - 服务器端渲染都使用 React Router v3。

唯一可用的指南是使用 React Router 版本 4 进行服务器端渲染。

我已遵循相同的步骤，但出现以下错误：

 _reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('app'));
                                                                            ^

ReferenceError: document is not defined
    at Object.<anonymous> (/Users/fakhruddinabdi/Projects/fotomantic/fotomantic.com/public/server.bundle.js:271:70)
    at __webpack_require__ (/Users/fakhruddinabdi/Projects/fotomantic/fotomantic.com/public/server.bundle.js:20:30)
    at Object.<anonymous> (/Users/fakhruddinabdi/Projects/fotomantic/fotomantic.com/public/server.bundle.js:59:13)
    at __webpack_require__ (/Users/fakhruddinabdi/Projects/fotomantic/fotomantic.com/public/server.bundle.js:20:30)
    at /Users/fakhruddinabdi/Projects/fotomantic/fotomantic.com/public/server.bundle.js:40:18
    at Object.<anonymous> (/Users/fakhruddinabdi/Projects/fotomantic/fotomantic.com/public/server.bundle.js:43:10)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)

这是我的网络

var fs = require('fs');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

  entry: path.resolve(__dirname, 'server.js'),

  output: {
    filename: 'public/server.bundle.js',
  },

  plugins: [
    new ExtractTextPlugin('public/styles.css'),
  ],

  target: 'node',

  // keep node_module paths out of the bundle
  externals: fs.readdirSync(path.resolve(__dirname, 'node_modules')).concat([
    'react-dom/server', 'react/addons',
  ]).reduce(function (ext, mod) {
    ext[mod] = 'commonjs ' + mod
    return ext
  }, {}),

  node: {
    __filename: true,
    __dirname: true
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      }, {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: 'url-loader?limit=10000&name=/[hash].[ext]',
      }, {
        test: /\.scss$/,
        exclude: /node_modules/,
        loader: ExtractTextPlugin.extract(['css', 'sass']),
      },
    ],
  },

}

我的 server.js ：

import { createServer } from 'http';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { ServerRouter, createServerRenderContext } from 'react-router';
import App from './src/components/App';

createServer((req, res) => {

  // first create a context for <ServerRouter>, it's where we keep the
  // results of rendering for the second pass if necessary
  const context = createServerRenderContext()

  // render the first time
  let markup = renderToString(
    <ServerRouter
      location={req.url}
      context={context}
    >
      <App/>
    </ServerRouter>
  )

  // get the result
  const result = context.getResult()

  // the result will tell you if it redirected, if so, we ignore
  // the markup and send a proper redirect.
  if (result.redirect) {
    res.writeHead(301, {
      Location: result.redirect.pathname
    })
    res.end()
  } else {

    // the result will tell you if there were any misses, if so
    // we can send a 404 and then do a second render pass with
    // the context to clue the <Miss> components into rendering
    // this time (on the client they know from componentDidMount)
    if (result.missed) {
      res.writeHead(404)
      markup = renderToString(
        <ServerRouter
          location={req.url}
          context={context}
        >
          <App />
        </ServerRouter>
      )
    }
    res.write(markup)
    res.end()
  }
}).listen(8080)
4

2 回答 2

1

我刚刚想通了。！

正如@Paul S 在评论中提到的那样，问题来自于将这个 linke :ReactDOM.render(<App />, document.getElementById('app'));放在App组件中。

所以我刚刚创建了另一个文件，即 client.js 并将该行移到那里。所以它有效。

这是因为App组件在服务器端和客户端之间共享。App因此，如果要处理服务器端渲染，则需要将客户端代码从组件中取出。

感谢保罗。

于 2016-11-22T21:34:23.583 回答
0

我创建了基于 redux 服务器端渲染和 react-router v4 服务器端渲染文档的启动器：https ://github.com/gzoreslav/react-redux-saga-universal-application

于 2017-12-14T10:45:21.860 回答