在服务器端/React/React-Router + Node/Express.js 的同构渲染中未定义 renderProps

Question

我正在尝试让服务器端/同构渲染与 react-router 一起为 react 应用程序工作。

我的route.js：

import React from 'react';
import { Route } from 'react-router';

import Test from './components/test';

export default (
  <Route path="/test" component={ Test }>
  </Route>
);

我的server.js：

'use strict';

require('babel-core/register')

var path = require('path');
var express = require('express');
var logger = require('morgan');
var compression = require('compression');
var http = require('http');

var ReactDOM = require('react-dom/server');
var Router = require('react-router');
var match = Router.match;
var RoutingContext = Router.RoutingContext;
var routes = require('./src/routes');


var app = express();
var server;
var PORT = process.env.PORT || 3000


app.use(logger('dev'));
app.use(compression());

// Set path to public assets
app.use(express.static(path.join(__dirname, 'public')));

app.get('*', function(req, res) {

  console.log('URL: ', req.url);
  console.log('Routes: ', routes);

  match({ routes: routes, location: req.url }, (error, redirectLocation, renderProps) => {
    console.log('Render Props: ', renderProps)
    if (error) {
      res.status(500).send(error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search);
    } else if (renderProps) {
      res.status(200).send(ReactDOM.renderToString(React.createElement(RoutingContext, renderProps)))
    } else {
      res.status(404).send('Not found')
    }
  })
})

server = http.createServer(app);

server.listen('3000', () => {
    console.log('Express server listening on port ' + PORT);
});

所以当我运行 npm run start 时，它只是在 server.js 上调用 node。服务器正常启动，但所有请求（包括 /test）都以 404 形式返回。

我控制台记录了 req.url，它返回了正确的 url。我对“路由”文件做了同样的事情，它肯定找到了正确的文件。以下是这些日志的输出：

Express server listening on port 3000
URL:  /test
Routes:  { default:
   { '$$typeof': Symbol(react.element),
     type:
      { [Function]
        displayName: 'Route',
        createRouteFromReactElement: [Function: createRouteFromReactElement],
        propTypes: [Object] },
     key: null,
     ref: null,
     props: { path: '/test', component: [Object] },
     _owner: null,
     _store: {} } }
Render Props:  undefined
GET /test 404 19.596 ms - 9

但是renderProps 始终未定义，响应返回 404。我以为我正确地遵循了这些示例，但我不确定我哪里出错了。

Answer 1

经过长时间调试后，我遇到了类似的问题，我发现了一些可以 解决了这个问题，以下是我在我的 应用：-

i) 首先你的测试组件应该返回一个合适的 dom 元素，react 可以渲染而不是仅仅渲染组件。您应该返回 null 或包含所需元素的适当容器元素。请参阅下面的示例。（这是我在应用程序中犯的第一个错误。）

export default class Test extends React.Component {

    constructor(props) { super(props); }

    render () {
                return (
                    <div>
                        <h1>opopooopppopo</h1>
                        <p>This is your world.</p>
                    </div>
                );
    }
}

ii) 在您的代码库中使用 RouterContext 而不是 RoutingContext 这对我有用，这是我的代码中的主要问题。因为 RoutingContext 在新版本的 react-router 中已被弃用。此更改解决了我的问题。

res.status('200').send(ReactDOM.renderToString(<RouterContext {...renderProps}/>));

（注意：请不要忘记从 react-router 模块导入 RouterContext。）

//从react-router导入路由器上下文的语句

var RouterContext = Router.RouterContext;

iii) 如果上述方法均无效，则更改匹配函数，使用 routes.default 而不是仅 routes。 更改：match({routes : routes, location} to match({routes : routes.default, location}，如果您使用 babel 6，则此更改是必要的。尝试结合 RoutingContext 和 RouterContext因为我不知道你使用的是哪个版本的 react-router 和 babel。所以组合是：-

a) match({ routes : routes }) 与 res.status('200').send(ReactDOM.renderToString(RoutingContext {.. .renderProps}/>));

b) match({ routes : routes }) 与 res.status('200').send(ReactDOM.renderToString(RouterContext {.. .renderProps}/>));

c) match({ routes : routes.default }) 结合 res.status('200').send(ReactDOM.renderToString(RoutingContext { ...renderProps}/>));

d) match({ routes : routes.default }) 结合 res.status('200').send(ReactDOM.renderToString(RouterContext { ...renderProps}/>));