为了账号安全,请及时绑定邮箱和手机立即绑定

关于react 服务端渲染的实现

标签:
Node.js React.JS

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

可以直接参考项目

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
846
获赞与收藏
196

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消