服务器渲染错误

Question

我使用 React + Express + Webpack

index.js

require('babel-core/register');
global.__CLIENT__ = false;
global.__SERVER__ = true;
global.__DEV__ = process.env.NODE_ENV !== 'production';

require('./src/server/index');

server.js

import React from 'react';
import express from 'express';
import compression from 'compression';
import { renderToString } from 'react-dom/server'
import { match, RouterContext } from 'react-router'
import routes from '../routes'

const app = express();

app.set('view engine', 'pug');
app.set('views', './src/views');

app.use(compression());

if (__DEV__) {
  const webpack = require('webpack');
  const devMiddleware = require('webpack-dev-middleware');
  const hotMiddleware = require('webpack-hot-middleware');
  const webpackConfig = require('./../../webpack.config.js');

  const compiler = webpack(webpackConfig);

  app.use(devMiddleware(compiler, {
    publicPath: webpackConfig.output.publicPath,
    historyApiFallback: true,
    noInfo: true,
    stats: { colors: true },
  }));

  app.use(hotMiddleware(compiler));
}

app.get('*', handleRequest);

app.listen(3000, (err) => {
  if (err) {
    return console.error(err);
  }

  console.log('Listening at http://localhost:3000/');
});

function handleRequest(req, res) {
  // Note that req.url here should be the full URL path from
  // the original request, including the query string.
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
      // You can also check renderProps.components or renderProps.routes for
      // your "not found" component or route respectively, and send a 404 as
      // below, if you're using a catch-all route.
      // res.status(200).send(renderToString(<RouterContext {...renderProps} />))
      res.render('index', {
        title: 'Easy start with ReactJS',
        reactOutput: renderToString(<RouterContext {...renderProps} />)
      });
    } else {
      res.status(404).send('Not found')
    }
  });
}

routes.js

import React from 'react';
import Route from 'react-router/lib/Route';

import Layout from './Layout';
import Counter from './Counter';

export default (
<Route path="/" component={Layout}>
    <Route path="/counter" component={Counter} />
</Route>
);

index.js

import AppContainer from 'react-hot-loader/lib/AppContainer';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const rootEl = document.getElementById('root');

ReactDOM.render(
  <AppContainer>
    <App />
  </AppContainer>,
  rootEl
);

if (module.hot) {
  module.hot.accept('./App', () => {
    // If you use Webpack 2 in ES modules mode, you can
    // use <App /> here rather than require() a <NextApp />.
    const NextApp = require('./App').default;
    ReactDOM.render(
      <AppContainer>
         <NextApp />
      </AppContainer>,
      rootEl
    );
  });
}

App.js

import React, { Component } from 'react';
import Router  from 'react-router/lib/Router'
import browserHistory  from 'react-router/lib/browserHistory'
import routes from './routes'

export default () => (
  <Router history={browserHistory} routes={routes} />
);

刷新页面时出现错误

警告：React 试图在容器中重用标记，但是 校验和无效。这通常意味着您正在使用服务器 渲染和服务器上生成的标记不是 客户期待。 React 注入了新的标记来弥补 可以，但是您已经失去了服务器渲染的许多好处。 相反，要弄清楚为什么生成的标记在 客户端或服务器：
(client) tid="2">你好，世界你好，世界！

还有这个

警告：[react-router] 你不能改变；这将是 忽略

全部代码here

Answer 1

对于SSR，你可以试试：

<Router key={Math.random()} history={browserHistory} routes={routes} />

cfthis gh discussion