u11*_*937 5 javascript node.js single-page-application reactjs react-router
我正在使用React Router 4在基本级别上实现服务器端渲染，以了解其工作原理。但是，我遇到了一些问题，React Router提供的文档尚不清楚如何解决它们：
1）我在/ server / routes中的上下文变量未定义。
我在以前的教程中已经看到React Router曾经使用过createServerRenderContext（）; 但是在他们的文档中没有任何提及，所以我假设他们摆脱了它。我以为StaticRouter应该在渲染时为您创建上下文？如何定义上下文？
2）我的html变量（将StaticRouter呈现为字符串）在控制台中显示了这两个错误：
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']
}
}
]
}
]
}
};