使用React Router 4进行服务器端渲染时，上下文为未定义

我正在使用React Router 4在基本级别上实现服务器端渲染，以了解它是如何工作的。不过，我遇到了一些问题，React Router提供的文档并不清楚如何解决它们：

1）/服务器/路由中的我的上下文variables是未定义的。

在前面的教程中我看到React Router用来使用createServerRenderContext（）; 但是在他们的文档中没有提到，所以我假设他们摆脱了它。我认为StaticRouter应该为你创build你的上下文吗？ 我如何定义我的上下文？

2）我的htmlvariables呈现StaticRouter作为一个string在控制台显示这两个错误：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

我不完全确定为什么这是一个问题。我相信这是正确的导出，我通过renderToString传递。 为什么这给我一个错误？

任何帮助深表感谢！这是我的代码如下：

服务器端

/server/server.js

 import express from 'express' import router from './routes/index.js' const app = express(); app.use(express.static('public')); app.use(router) const PORT = 3000; app.listen(PORT, function(){ console.log('Listening on ' + PORT) });

/server/routes/index.js

 import { Router } from 'express' import React from 'react' import ReactDOMServer from 'react-dom/server' import { StaticRouter } from 'react-router' import App from '../../client/App' const router = Router(); router.get('*', function(request, response) { const context = {} const html = ReactDOMServer.renderToString( <StaticRouter location={request.url} context={context}> <App/> </StaticRouter> ); if (context.url) { response.writeHead(301, { Location: context.url }) response.end() } else { response.write(html) response.end() } }); export default router

客户端

/client/index.js

 import React from 'react' import ReactDOM from 'react-dom' import { BrowserRouter } from 'react-router'; import App from './App' const props = window.PROPS; ReactDOM.render( <BrowserRouter> <App {...props} /> </BrowserRouter>, document );

/client/App.js

 import React from 'react' class App extends React.Component { constructor() { super() } handleClick() { alert() } render() { return ( <html> <head> <title>{this.props.title}</title> <link rel="stylesheet" href="/style.css" /> </head> <body> <main> <h1>{this.props.title}</h1> <p>This is some text that makes up a paragraph</p> <button onClick={this.handleClick}>Click me</button> </main> <script dangerouslySetInnerHTML={{ __html: 'window.PROPS=' + JSON.stringify(this.props) }} /> <script src="/bundle.js" /> </body> </html> ) } } export default App;

Webpack.config.js

 var webpack = require('webpack'); var path = require('path'); module.exports = { entry: './src/client/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'public'), publicPath: '/public/' }, module: { rules: [ { test: /\.js?$/, exclude: /node_modules/, include: path.join(__dirname, 'src'), use: [ { loader: 'babel-loader', query: { presets: ['react', ['es2015', { 'modules': false }], 'stage-0'], plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'] } } ] } ] } };

使用React Router 4进行服务器端渲染时，上下文为未定义

Krakenjs如何将除api调用之外的所有请求路由到index.html？

如何使用Express.js正确设置单页应用程序的路线？

如何使用node.js比symfony更好地应对前端？

在服务器和客户端上渲染Backbone.js应用程序

如何在加载时configurationSPA？

为什么使用Bower.js如果npm工作正常？

Webpack – 如何在基础HTML中要求结果文件（最佳实践）

持续部署单页面应用程序？

在SPA（单页面应用程序）中使用node.js + express.js在服务器端dynamic生成内容的SEO

如何使用React-Helmet优化SPA的SEO？