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

时间:2016-09-04 18:54:28

标签: javascript node.js reactjs pug

在我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,它也会被打印出来,但页面不会被渲染。我该如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

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

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

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