反应 Rails 虚拟 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:

使用 Turbo 导航links

Turbolinks 会截获对同一域的 links 的所有点击。当您单击符合条件的 link 时，Turbolinks 会阻止浏览器跟随它。相反，Turbolinks 使用历史记录 API 更改浏览器的 URL，使用 XMLHttpRequest 请求新页面，然后呈现 HTML 响应。

在渲染过程中，Turbolinks 完全替换当前元素并合并元素的内容。 JavaScript window 和文档对象，以及 HTML 元素，从一个渲染持续到下一个渲染。

反应 Rails 虚拟 DOM 堆叠许多节点

React with Rails Virtual DOM stacking many nodes

ruby-on-rails

reactjs

react-router

turbolinks

使用 Turbo 导航links