Rails + React应用页面需要重新加载才能渲染React

Question

我使用rails new exampleapp --webpack=react创建了一个新的Rails + React应用。在我的主页上，我在html.erb中有一个标题，并且使用<%= javascript_pack_tag 'reactfilename' %>呈现了一些react jsx。

当我单击首页链接，例如<li><%= link_to "Home", root_path %></li>时，仅显示标题。直到我重新加载页面后，我的react组件才会显示。

我同时运行rails s和./bin/webpack-dev-server以启动我的应用程序。我的Heroku Web服务器上发生相同的问题。在其中我有以下设置：

Procfile： web: bin/rails server -p $PORT -b 0.0.0.0

Procfile.dev：

web: ./bin/rails server
webpacker: ./bin/webpack-dev-server

这是React + Rails应用程序的预期行为，还是我的配置有问题？

Answer 1

我相信这个问题与turbolink的背景优化有关。一种解决方法是通过将turbolinks设置为false来完全刷新页面：

<%= link_to "Home", root_path, data: { turbolinks: false } %>

Answer 2

确保turbolink:load事件发生后正在加载组件

document.addEventListener('turbolinks:load', () => {
  let container = document.getElementById('react-order')
  if (!container) return

  ReactDOM.render(
    <OrderForm />,
  container)
})