github代码地址: react 服务端渲染
- 使用nodejs作为中间件
- ejs的模版
- webpack的配置编译
- babel编译ES6/7语法
部分代码示例:
"use strict";
import React,{Component} from 'react'
import {match, RouterContext} from 'react-router';
import routes from '../app/Routes/Route';
import ReactDOMServer from 'react-dom/server';
/* react服务端渲染中 地址路由地址必须是browserHistory
* 若使用hashHistory ,这只会出现首页渲染
* */
module.exports = function (req, res) {
match(
{routes, location: req.url},
(err, redirectLocation, renderProps) => {
if (err) return res.status(500).send(err.message);
if (redirectLocation) return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
if (renderProps) {
const element = <RouterContext {...renderProps}/>;
const markup = ReactDOMServer.renderToStaticMarkup(element);
res.render('index', {markup});
} else {
res.status(404);
}
}
);
};
可以直接参考项目
點(diǎn)擊查看更多內(nèi)容
1人點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦