Rails + React 应用程序页面需要重新加载才能呈现 React

Posted 2023-02-22

【中文标题】Rails + React 应用程序页面需要重新加载才能呈现 React

【英文标题】：Rails + React App Pages Require Reload To Render React

【发布时间】：2020-06-10 22:36:38

【问题描述】：

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

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

我同时运行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 应用程序的预期行为，还是我的配置有问题？

【参考方案1】：

我认为这个问题与 turbolinks 后台优化有关。一种解决方法是通过将 turbolinks 设置为 false 来完全刷新页面：

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

使用较新版本的 turbolink：

<%= link_to "Home", root_path, data:  turbo: false  %>

【讨论】：

对于带有 Turbo 的较新版本的 Rails（以前的 Turbo Links），请使用 data:  turbo: false  

【参考方案2】：

确保在 turbolink:load 事件之后加载组件

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

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