一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    React SSR的探索学习

    技术 214 2021-09-14 15:52

    找了很多开源的react SSR 项目 都不算稳定,

    最重选择了:react-koa2-ssr


    项目搭建成功之后 配置了一下路由发现报错:

    BorwserRouter out must have a Dom

    大概意思就是说 我们用的BorwserRouter需要外面加一个标签dom

    解决方案:


    src/index.js

    import React from "react";
    import ReactDOM from "react-dom";
    import { BrowserRouter } from "react-router-dom";
    import "./index.css";
    import App from "./App.jsx";
    import * as serviceWorker from "./serviceWorker";
    
    ReactDOM.hydrate(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
      document.getElementById("root")
    );
    
    serviceWorker.unregister();
    

    server/app.js

    import { StaticRouter} from "react-router-dom";
         ctx.response.body = shtml.replace(
            "{{root}}",
            renderToString(
              <StaticRouter>
                <App />
              </StaticRouter>
            )
          );
    

    完事就可以了

    配置的参考文档:

    https://zhuanlan.zhihu.com/p/52693113

    (参考其中的相关配置 ,但用的是https://github.com/Bill-Pang/react-koa2-ssr

    文章评论

    评论列表(0