Страницы приложения Rails + React требуют перезагрузки для отображения React

Question

Я создал новое приложение Rails + React, используя rails new exampleapp --webpack=react. На моей домашней странице у меня есть заголовок в html.erb, и некоторые реагируют на jsx с использованием <%= javascript_pack_tag 'reactfilename' %>.

Когда я нажимаю ссылку на мою домашнюю страницу, например <li><%= link_to "Home", root_path %></li>, отображается только заголовок. Только после перезагрузки страницы отображается мой реагирующий компонент.

Я запускаю и rails s, и ./bin/webpack-dev-server, чтобы запустить мое приложение. Та же проблема возникает на моем веб-сервере Heroku. в которой у меня есть следующие настройки:

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. Одним из обходных путей является полное обновление sh страницы, установив в турболинках значение 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)
})