Отсутствует DOM при создании статической страницы реагирования с помощью моментального снимка реакции

Новичок в предварительном рендеринге здесь, поэтому я следую этому руководству: https://medium.com/superhighfives/an-почти-статический-стек-6df0a2791319

И я дошел до того, что статический HTML создается react-snapshot. В сгенерированном HTML body выглядит так:

   <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id = "root"></div>
      <script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t = {},p = {2:0},c=[];function f(e){if (t[e])return t[e].exports;var r=t[e] = {i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if (1&e&&(r=f(r)),8&e)return r;if (4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if (f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p = "/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src = "/static/js/1.2664f19e.chunk.js"></script><script src = "/static/js/main.4acc5dad.chunk.js"></script>
   </body>

как вы можете видеть, div "root" пуст, в отличие от примера на носителе, который показывает весь DOM:

<body>
  <div id = "root">
    <div class = "App" data-reactroot = "" data-reactid = "1" data-react-checksum = "1438355234">
      <div class = "App-header" data-reactid = "2">
        <img src = "/static/media/logo.5d5d9eef.svg" class = "App-logo" alt = "logo" data-reactid = "3">
        <h2 data-reactid = "4">Welcome to React</h2>
      </div>
      <p class = "App-intro" data-reactid = "5">
        <!-- react-text: 6 -->To get started, edit <!-- /react-text -->
        <code data-reactid = "7">src/App.js</code>
        <!-- react-text: 8 --> and save to reload.<!-- /react-text -->
      </p>
    </div>
  </div>
  <script type = "text/javascript" src = "/static/js/main.69baff85.js"></script>
</body>

Что мне не хватает? Мне нужно, чтобы body был статичным.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
161
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Моментальный снимок отсутствовал из-за условия внутри метода render в App.js. Удаление условия устранило проблему.

Другие вопросы по теме