Javascript React/React路由器的服务器端/同构呈现中未定义renderProps+；Node/Express.js

我正试图让服务器端/同构渲染与react路由器一起为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>
);

'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。我对“routes”文件也做了同样的操作，它肯定找到了正确的文件。以下是这些日志的输出：

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。我认为我正确地遵循了这些例子，但我不确定哪里出了错

经过长时间的调试，我发现了一些可以解决的问题 修正了这个问题，下面是我在工作中改变的几点 应用程序：-

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

iii）如果上述各项均不起作用，则更改匹配功能，使用路由。默认值，而不是仅使用路由更改：匹配（{routes:routes，location}）要匹配（{routes:routes.default，location}，如果您使用的是babel 6，则此更改是必需的。请尝试将RoutingContext和RouterContext组合使用，因为我不知道您使用的是哪一版本的react router和babel。因此组合为：-

a） 将（{routes:routes}）与res.status（'200'）.send（ReactDOM.renderToString（））的组合匹配

b） 将（{routes:routes}）与res.status（'200'）.send（ReactDOM.renderToString（））的组合匹配

c） 将（{routes:routes.default}）与res.status（'200'）.send（ReactDOM.renderToString（））的组合匹配

---

d） 将（{routes:routes.default}）与res.status（'200'）.send（ReactDOM.renderToString（））的组合匹配

你找到解决办法了吗？

export default class Test extends React.Component {

    constructor(props) { super(props); }

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

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

var RouterContext = Router.RouterContext;