Ошибка при отрисовке сервера

Я использую 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');

сервер.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} />
);

Ошибка возникает при обновлении страницы

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) tid="2">Hello, worldHello, world!

and this

Предупреждение: [реакция-маршрутизатор] Вы не можете изменить ; это будет проигнорировано

Весь код здесь