React 服务器端渲染错误页面答案

【问题标题】：React server side rendering wrong pageReact 服务器端渲染错误页面
【发布时间】：2016-09-04 18:54:28
【问题描述】：

在我的app.js 中，我有两个部分...

app.use('/', index);
app.use('/register', reg);

一个索引部分和一个寄存器部分。

在我的index.js 中，我正在渲染以下内容...

var React = require('react');
var reactDom = require('react-dom/server');
var RegApp = React.createFactory(require('../components/index'));

router.get('/', function(req,res) {
    var reactHtml = reactDom.renderToString(RegApp({exists: false}));
    res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml});
});

这是调用下面的 react 组件来渲染...

class RegApp extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){

        return (    
            <Register />
        );
    }
}
module.exports = RegApp;

所以用户将看到的第一页是<Register /> 组件。现在，在我的另一条路线中，register.js 我正在查询数据库并根据结果呈现页面。

简而言之，我正在尝试渲染另一个组件来替换我在上面渲染的那个......

var React = require('react');
var reactDom = require('react-dom/server');
var App = React.createFactory(require('../components/index'));

router.post('/', function (req, res) {
//Here I query the db

...
    console.log("query success");
    var reactHtml = reactDom.renderToString(App({exists: true}));
    res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml});

这试图渲染的组件如下...

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){

        return (    
            <Index />
        );
    }
}
module.exports = App;

问题是，这个组件永远不会被渲染。页面刷新并呈现第一个组件<Register /> 而不是<Index />。这一切都非常令人困惑，因为控制台打印了query success，但仍然没有呈现页面。即使我在App 组件的渲染方法中放置了console.log，它也会被打印出来但页面不会被渲染。我该如何解决这个问题？

【问题讨论】：

标签： javascript node.js reactjs pug

【解决方案1】：

您似乎正在为路径传递 Register 组件：/

router.get('/', function(req,res) {
    var reactHtml = reactDom.renderToString(RegApp({exists: false}));
    res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml});
});

上面的路径应该是/register，或者组件应该是App组件。

【讨论】：

我还是遇到同样的问题