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

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 中已经被deprecated。此更改解决了我的问题。

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