与Rails Virtual DOM堆叠很多节点进行反应

Question

我正在将Rails与React和react-router一起使用，并且遇到一个问题，每次加载视图时，它都会堆叠在虚拟DOM中

这是我的application.js（主包）

document.addEventListener('turbolinks:load', () => {
  const node = document.getElementById('application-content')

  ReactDOM.render(
    <Router>
      <div>
        <Route path="/" exact component={() => require('./main.jsx').default} />
        <Route path="/sign_in" component={() => require('./session.jsx').default} />
        <Route path="/categories" component={() => require('./categories.jsx').default} />
      </div>
    </Router>,
    node
  );

});

Answer 1

当您转到页面时，html仍然存在，但是调用了React的渲染。并插入路由器的另一个副本。因此，您需要将渲染移到另一个位置。

这来自turbolinks Readme：

使用Turbolinks导航

Turbolinks会拦截所有指向同一域的链接的点击。当您单击一个合格的链接时，Turbolinks会阻止浏览器关注它。相反，Turbolinks使用History API更改浏览器的URL，使用XMLHttpRequest请求新页面，然后呈现HTML响应。

在渲染期间，Turbolinks彻底替换当前元素并合并该元素的内容。 JavaScript窗口和文档对象以及HTML元素从一个呈现持续到另一个呈现。