React Js. Что с тобой?

Некоторое время не писал на реакте и вот решил исправить сие деяние. Но внезапно начал получать такую ошибку
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) <div data-reactid="
 (server) <div data-reactid="


Что не так?
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, browserHistory } from 'react-router'
import App from './app/containers/App'

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
    </Route>
  </Router>
), document.getElementById('app'))


App.js
import React from 'react'

import './App.css'

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>h</h1>
      </div>
    )
  }
}

export default App
  • Вопрос задан
  • 1439 просмотров
Решения вопроса 1
JiSeven
@JiSeven Автор вопроса
web-developer
Проблема была в webpack-html-plugin
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Реакт тут не при чем. Просто у вас разметка с сервера и отрендеренная на клиенте отличается.
Ответ написан
Комментировать
Laiff
@Laiff
Front-end developer
Это означает, что во первых в приложении есть серверный рендеринг, во-вторых сейчас получается так, что серверная разметка отличается от той которая получилась при первом (!) рендере.
Чуть ниже в ошибке показано место в котором падает проверка идентичности, это может помочь понять, что именно отличается в рендеринге.
Зачастую такое бывает когда что-то рендерится асинхронно от первого рендера
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы