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

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.

Run Code Online (Sandbox Code Playgroud)

我不完全确定为什么这是一个问题。我相信这已正确导出，并且正在通过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)
});

Run Code Online (Sandbox Code Playgroud)

/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

Run Code Online (Sandbox Code Playgroud)

客户端

/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
);

Run Code Online (Sandbox Code Playgroud)

/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;

Run Code Online (Sandbox Code Playgroud)

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']
            }
          }
        ]
      }
    ]
  }
};

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，7 月前
查看次数：	493 次
最近记录：	8 年，7 月前