Question

在我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});
});

这是要调用以下反应组件...

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，但页面仍未呈现。即使我在console.log组件的render方法中放置App，它也会被打印出来，但页面不会被渲染。我该如何解决这个问题？

Answer 1

您似乎在路径的Register组件中传递：/

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

路径应该是/在上面注册，或者组件应该是App组件。

React服务器端渲染错误的页面

1 个答案: